Flutter 完整项目 WanAndroid 开发总结

港控/mmm° 2023-02-21 12:25 11阅读 0赞

# Flutter 系列文章 #

从19年初到现在，断断续续更新了一些 `Flutter`相关的文章，所有文章都在下方的专栏地址中可查。

专栏地址：

*  [Flutter 专栏博文地址][Flutter]

从刚开始研究学习`Flutter-go`项目，到后面慢慢学一些`widget`的使用，最后利用所学的所有知识点串联起来实现了`FlutterWanAndroid`项目。这个项目`UI`借鉴了`Flutter-go`项目的`UI`以及网上一些优秀源码或者博文实现的效果。

项目地址：

*  [Flutter-WanAndroid][]
 *  [flutter-go][]

# FlutterWanAndroid 项目 #

> FlutterWanAndroid 项目 UI 主要参考 flutter-go 的 UI，而 API 接口使用了 鸿洋大佬的 玩Android 站点 api  
> 大佬的站点： [wanandroid][]

完成这个项目项目学到了下面的一些知识点

*  常见`基础widget、单子widget 、多子widget、层叠widget、裁剪widget、列表widget` 的使用
 *  页面切换动画：使用命名路由中的`define: transitionType:TransitionType.inFromLeft`
 *  网络请求封装：`Dio` 成功失败回调
 *  路由封装：命名路由带参，`define+handler`, 在`MyApp`中注册`onGenerateRoute: Application.router.generator,`
 *  全局404页面：`MyApp-MaterialApp-onUnknownRoute`
 *  Bugly 线上崩溃收集：`release`可以正常接收到崩溃上报，但是`debug`会有延迟
 *  Bugly 升级：有延迟
 *  JPush 推送：`release版`可以立即收到推送
 *  lottie 动画使用：`gif`，或者使用第三方库
 *  闪屏页+广告页：`debug` 和 `release` 包会有差别，特别是广告页面中倒计时`debug`会有些卡顿
 *  打包流程: `flutter` 不同版本会有出入，我的`flutter`版本是`1.17`
 *  `Provider +SP` 使用：全局 `consumer` 共享数据、使用`provider`实现主题色切换
 *  `method channel`使用：获取电池电量展示、打开应用市场
 *  国际化+主题色修改：`i18`，`Provider`  
    \-`sqlite、webView、camera`使用：库的使用
 *  注册登录功能：wanandroid 站点登录接口+ sp 本地缓存
 *  底部导航加载优化：使用 `AutomaticKeepAliveClientMixin` 修复 `TabsView` 重复加载问题

# 开发中遇到的问题 #

## WebView 中不显示 Snakebar ##

查看 `flutter - go` 中也没有显示`snakebar`

查阅资料了解到目前 `WebView`插件还没有解决在 `WebView` 上显示弹窗这个问题  
可查看 [WebView 库的 issue][WebView _ issue]

或者这篇文章`https://www.cnblogs.com/pjl43/p/9866753.html`

## 传递参数到 WebView 需要转义 ##

传递参数到`webview`需要使用`Uri.encodeComponent`转义：

Application.router.navigateTo(context,
                    '${Routes.webViewPage}?id=${Uri.encodeComponent(collection.id)}&title=${Uri.encodeComponent(collection.title)}&link=${Uri.encodeComponent(collection.link)}');

## \[ERROR:flutter/lib/ui/ui\_dart\_state.cc(148)\] Unhandled Exception: setState() called after dispose(): \_CateCardState\#24c6b(lifecycle state: defunct, not mounted) ##

加个判断处理：

if(monded){
      	setState{
    	
    	}
    }

## flutter 版本升级（或者导入新的项目出现版本冲突解决办法 ） ##

在 flutter 目录（从 git 下拉的目录）下执行以下语句：

git clean -xfd
        git stash save --keep-index
        git stash drop
        git pull
        flutter doctor（命令行执行可能会失败）

可在 `AndroidStudio` 中打开 `pubspec.yml`右上角找到 `Flutter upgrade`

## 报错:Process ‘command ‘C:\\Users\\Aller\\flutter\\bin\\flutter.bat’’ finished with non-zero exit value 1 at o ##

解决办法：`https://www.jianshu.com/p/60f9e3f8dcb6`

将`GradleException()`更新为`android/app/build_gradle`下的`FileNotFoundException()`

## 打包问题 ##

Bugly 打包命令： `flutter build apk --release --target-platform android-arm64`

Could not determine the dependencies of task ':app:processReleaseResources'.
      > Could not resolve all task dependencies for configuration ':app:releaseRuntimeClasspath'.
         > Could not resolve project :path_provider_macos.
           Required by:
               project :app > project :path_provider
            > Unable to find a matching configuration of project :path_provider_macos:
                - None of the consumable configurations have attributes.

参考：

*  `https://www.jianshu.com/p/8328f495c632`  
    删除 C:\\Users\\Aller\\flutter\\bin\\cache 目录下的 lockfile，lock文件
 *  `https://github.com/flutter/flutter/issues/39687`

classpath 'com.android.tools.build:gradle:3.5.0' 改为
     classpath 'com.android.tools.build:gradle:3.4.1'

## Gradle build failed to produce an .apk file. ##

Gradle build failed to produce an .apk file. 
      It's likely that this file was generated under C:\Users\xxx\flutter\flutter_wanandroid\build, but the tool couldn't find it.

参考：

*  `https://blog.csdn.net/haha223545/article/details/105250251/`

自定义输出apk路径导致的问题，删了`AndroidStudio` 中配置的自定义 `apk` 输出路径

## verifyReleaseResources 问题 ##

* What went wrong:
      Execution failed for task ':url_launcher:verifyReleaseResources'.
      > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
         > Android resource linking failed
           C:\Users\xxxr\.gradle\caches\transforms-2\files-2.1\37ff3f935527542507bf8998c1ff5fdc\core-1.1.0\res\values\values.xml:142:5-173:25: AAPT: error: resource android:attr/fontVariationSettings not found.
    
           C:\Users\xxx\.gradle\caches\transforms-2\files-2.1\37ff3f935527542507bf8998c1ff5fdc\core-1.1.0\res\values\values.xml:142:5-173:25: AAPT: error: resource android:attr/ttcIndex not found.

解决方案：

*  flutter clean
 *  升级 package 到最新版本 ：https://pub.dev/
 *  再构建一次

## couldn’t find “libflutter.so” ##

java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.example.flutterwanandroid-shOFAQG9jJBjCIAwDUA6Xw==/base.apk"],nativeLibraryDirectories=[/data/app/com.example.flutterwanandroid-shOFAQG9jJBjCIAwDUA6Xw==/lib/arm, /data/app/com.example.flutterwanandroid-shOFAQG9jJBjCIAwDUA6Xw==/base.apk!/lib/armeabi-v7a, /system/lib]]] couldn't find "libflutter.so"

原因是手机为64位`cpu`架构；需要添加如下配置：

ndk {
        //设置支持的SO库架构
        abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
    }

## 切换 flutter 版本 ##

不同的 flutter 版本可能会有不一样的问题，在打包的时候我这边就一直打包不成功，故切换版本尝试，遂成功。

参考：

*  `https://blog.csdn.net/wangyajuncsd/article/details/104439108`

通过 git reset 不同的 commit 码即可  
`git reset --hard fabeb2a16f1d008ab8230f450c49141d35669798（release commit 码）`

# flutter 学习资料 #

*  flutter 实战：https://book.flutterchina.club/
 *  flutter 开发者：http://flutter.link/
 *  flutter 中文网：https://flutterchina.club/
 *  flutter 第三方库 https://pub.dartlang.org/flutter/packages/
 *  flutter dart 学习：https://flutterchina.club/bootstrap-into-dart/
 *  鸿洋（玩Android 站点中有不少资源，推荐！）：https://mp.weixin.qq.com/s/nXWri-9dAE0mtjihT3V1Vg
 *  恋猫月亮：https://www.jianshu.com/p/533b5b8d2f71
 *  完整项目：https://itsallwidgets.com/
 *  Flutter JSON 转 Model 实体类
    
     *  http://www.wanandroid.com/blog/show/2452
     *  https://javiercbk.github.io/json\_to\_dart/

# 上车 #

> 佛系原创号主  
> ![在这里插入图片描述][20200528213904480.jpg]

[Flutter]: https://blog.csdn.net/itxiaodong/category_9285374.html
[Flutter-WanAndroid]: https://github.com/YGragon/Flutter-WanAndroid
[flutter-go]: https://github.com/alibaba/flutter-go
[wanandroid]: https://www.wanandroid.com/
[WebView _ issue]: https://github.com/fluttercommunity/flutter_webview_plugin/issues/69
[20200528213904480.jpg]: https://img-blog.csdnimg.cn/20200528213904480.jpg