Flutter UI 1.0.2落地与优化小结

2023年7月22日 199次阅读 来源: 许宏斌

项目仓库 目前最新版本
1.0.2已经提供下载，欢迎提交PR与
issue

FLUTTER 1.0.0 遇到的问题

  • 崩溃率高 没加入监控
  • ui交互过于简陋
  • 多语言设置重启后会重置
  • 项目初期频繁更新问题
  • 风格定制化问题 针对以上，我们连续做了两个版本迭代，终于解决了大部分问题，目前版本相对于1.0.0做了大部分重构与优化

崩溃问题

支持 AndroidX 目前flutter 的 compileSdkVersion 最低要求为 28，1.0.0 我们采取了老的27进行开发，目前已经全面升级到28， 升级方法可以参考,目前dev分支不太适合作为开发分支，小米机型频繁崩溃，链接通道
Firebase crashlytics 接入，可以更好了解app的崩溃情况，后面可以针对crash进行快速定位

风格重构

针对海量诉求说 1.0.0 ui过于丑陋，我们也探索了几个方法去优化，借鉴了掘金交互，我们完成了ui的重构，并且引用了 Material UI color 的样式定义了多主题适配方案，让更多同学可以定义自己的风格

多主题实现

lib/main.dart 我们使用 scopedModel 进行了数据监听并且更新根节点的方式进行热更主题的效果,redux,bloc以及state 都可以实现

@override
  Widget build(BuildContext context) {
    return Store.init(
      model: model,
      child: Store.connect(builder: (context, child, model) {
        return MaterialApp(
          ......
          theme: AppTheme.getThemeData(model.config.state.theme),//关键操作部分
          ......
        );
      }),
    );
  }

多语言重置问题

开发过程中，我们忽略了本地化的问题，1.0.2 已经fixed

自动更新

为了更人性化的进行迭代推送，我们加入了版本检测功能，踩过了不少的坑位，目前最大的是权限检测crash 新版本flutter 已经解决了这个问题，老的版本仍然存在

实现方式

lib/dart 代码实现片段

import 'package:package_info/package_info.dart'; //检测当前包是否与远程包版本一致
import 'package:efox_flutter/store/http.dart' as Http;
import 'package:path_provider/path_provider.dart'; //读取app路径
import 'package:flutter_downloader/flutter_downloader.dart';// 下载库
import 'package:open_file/open_file.dart';// 打开apk
import 'package:permission_handler/permission_handler.dart';// 获取并授予权限
// 权限检测  确保获取存储权限
Future<bool> _checkPermission() async {
    ...
}
// 获取安装地址
Future<String> get _apkLocalPath async {
    final directory = await getExternalStorageDirectory();
    return directory.path;
}
// 检查app版本
Future<Null> check(context, {showTips: false}) async {
    ......
}
// 下载并打开apk进行安装
Future _downAndInstall(String version) async {
   ...... 
}

android/app/src/main/res/AndroidManifest.xml 加入

<!-- Flutterdownloader configuration -->
        <provider
            android:name="vn.hunghd.flutterdownloader.DownloadedFileProvider"
            android:authorities="${applicationId}.flutter_downloader.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/provider_paths"/>
        </provider>

        <provider
            android:name="androidx.work.impl.WorkManagerInitializer"
            android:authorities="${applicationId}.workmanager-init"
            android:enabled="false"
            android:exported="false" />

        <provider
            android:name="vn.hunghd.flutterdownloader.FlutterDownloaderInitializer"
            android:authorities="${applicationId}.flutter-downloader-init"
            android:exported="false">
            <meta-data
                android:name="vn.hunghd.flutterdownloader.MAX_CONCURRENT_TASKS"
                android:value="5" />
        </provider>

        <!-- Flutterdownloader configuration end -->

小结

经过以上优化后，目前 flutter ui 已经进入了相对稳定的版本，后续迭代与更新可以无缝对接，并且针对IOS 也作出了兼容性方案处理，经过测试流畅度也得到了比较不错的提升，

不足的地方

  • 数据设计模型过于复杂，需要进一步优化
  • 代码切分力度有待加强
  • 教材文档因工作问题更新缓慢持续推进中
  • 个性化交互有待加强加入版本迭代规划中

如大家有兴趣可以一起加入讨论，帮助我们做得更好！

    原文作者：许宏斌
    原文地址: https://zhuanlan.zhihu.com/p/60175093
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞