Flutter 完整项目 WanAndroid 开发总结

Posted 2020-12-13 gdragon

Flutter 系列文章

从19年初到现在，断断续续更新了一些 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

或者这篇文章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:UsersAllerflutterinflutter.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:UsersAllerflutterincache 目录下的 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:Usersxxxflutterflutter_wanandroiduild, 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:Usersxxxr.gradlecaches	ransforms-2files-2.137ff3f935527542507bf8998c1ff5fdccore-1.1.0
esvaluesvalues.xml:142:5-173:25: AAPT: error: resource android:attr/fontVariationSettings not found.

       C:Usersxxx.gradlecaches	ransforms-2files-2.137ff3f935527542507bf8998c1ff5fdccore-1.1.0
esvaluesvalues.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/

上车

佛系原创号主