Flutter UI 1.0.2落地與優化小結

Efox發表於2019-03-23
FlutterUI優化

專案倉庫 目前最新版本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 也作出了相容性方案處理，經過測試流暢度也得到了比較不錯的提升，

不足的地方

  • 資料設計模型過於複雜，需要進一步優化
  • 程式碼切分力度有待加強
  • 教材文件因工作問題更新緩慢持續推進中
  • 個性化互動有待加強加入版本迭代規劃中

如大家有興趣可以一起加入討論，幫助我們做得更好！

相關文章