Flutter完整開發實戰詳解(3、打包與填坑篇)| 掘金技術徵文

時間 2019-11-05

標籤 flutter 完整開發實戰詳解打包技術徵文简体版

原文原文鏈接

做爲系列文章的第三篇，繼篇章一和篇章二以後，本篇將爲你着重展現：Flutter開發過程的打包流程、APP包對比、細節技巧與問題處理。本篇主要描述的Flutter的打包、在開發過程當中遇到的各種問題與細節，算是對上兩篇的補全。javascript

友情提示：本文全部代碼均在 GSYGithubAppFlutter ，要不試試？(◐‿◑)。java

1、打包

首先咱們先看結果，以下表所示，是 Flutter 與 React Native 、IOS 與 Android 的縱向與橫向對比 。android

項目	IOS	Android
GSYGithubAppFlutter
GSYGithubAppRN

從上表咱們能夠看到：ios

Fluuter的 apk 會比 ipa 更小一些，這其中的一部分緣由是 Flutter 使用的 Skia 在Android 上是自帶的。git
橫向對比 React Native ，雖然項目不徹底同樣，可是大部分功能一致的狀況下， Flutter 的 Apk 確實更小一些。這裏又有一個細節，rn 的 ipa 包體積小不少，這實際上是由於 javascriptcore 在 ios上是內置的緣由。github
對上述內容有興趣的能夠看看《移動端跨平臺開發的深度解析》。web

一、Android打包

在Android的打包上，筆者基本沒有遇到什麼問題，在android/app/build.grade文件下，配置applicationId、versionCode、versionName 和簽名信息，最後經過 flutter build app 便可完成編譯。編程成功的包在 build/app/outputs/apk/release 下。編程

二、IOS打包與真機運行

在IOS的打包上，筆者卻是經歷了一波曲折，這裏主要講筆者遇到的問題。xcode

首先你須要一個 apple 開發者帳號，而後建立證書、建立AppId，建立配置文件、最後在info.plist文件下輸入相關信息，更詳細可看官方的《發佈的IOS版APP》的教程。bash

但因爲筆者項目中使用了第三方的插件包如 shared_preferences 等，在執行 Archive 的過程卻一直出現以下問題：

在 `Archive` 時提示找不到
#import <connectivity/ConnectivityPlugin.h> ///file not found
#import <device_info/DeviceInfoPlugin.h>
#import <flutter_statusbar/FlutterStatusbarPlugin.h>
#import <flutter_webview_plugin/FlutterWebviewPlugin.h>
#import <fluttertoast/FluttertoastPlugin.h>
#import <get_version/GetVersionPlugin.h>
#import <package_info/PackageInfoPlugin.h>
#import <share/SharePlugin.h>
#import <shared_preferences/SharedPreferencesPlugin.h>
#import <sqflite/SqflitePlugin.h>
#import <url_launcher/UrlLauncherPlugin.h>
複製代碼

經過 Android Studio 運行到 IOS 模擬器時沒有任何問題，說明這不是第三方包問題。經過查找問題發現，在 IOS 執行 Archive 以前，須要執行 flutter build release，以下圖在命令執行以後，Pod 的執行目錄會發現改變，而且生成打包須要的文件。（ps 普通運行時自動又會修改回來）

可是實際在執行 flutter build release 後，問題依然存在，最終翻山越嶺(╯‵□′)╯︵┻━┻，終於找到兩個答案：

Issue#19241 下描述了相似問題，可是他們由於路徑問題致使，通過嘗試並不能解決。
Issue#18305 真實的解決了這個問題，竟然是由於 Pod 的工程沒引入：

open ios/Runner.xcodeproj

I checked Runner/Pods is empty in Xcode sidebar.

drop Pods/Pods.xcodeproj into Runner/Pods.

"Valid architectures" to only "arm64" (I removed armv7 armv7s) 
複製代碼

最後終於成功打包，心累啊(///▽///)。同時若是但願直接在真機上調試 Flutter，能夠參考 :《Flutter基礎—開發環境與入門》下的 IOS 真機部分。

2、細節

這裏主要講一些小細節

一、AppBar

在 Flutter 中 AppBar 算是經常使用 Widget ，而 AppBar 可不只僅做爲標題欄和使用，AppBar上的 leading 和 bottom 一樣是有用的功能。

AppBar 的 bottom 默認支持 TabBar, 也就是常見的頂部 Tab 的效果，這實際上是由於TabBar 實現了 PreferredSizeWidget 的 preferredSize。因此只要你的控件實現了 preferredSize，就能夠放到 AppBar 的 bottom 中使用。好比下圖搜索欄，這是TabView下的頁面又實用了AppBar。

leading ：一般是左側按鍵，不設置時通常是 Drawer 的圖標或者返回按鈕。
flexibleSpace ：位於 bottom 和 leading 之間。

二、按鍵

Flutter 中的按鍵，如 FlatButton 默認是否有邊距和最小大小的。因此若是你想要無 padding、margin、border 、默認大小 等的按鍵效果，其中一種方式以下：

///
new RawMaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        padding: padding ?? const EdgeInsets.all(0.0),
        constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
        child: child,
        onPressed: onPressed);
複製代碼

若是在再上 Flex ，以下所示，一個可控的填充按鍵就出來了。

new RawMaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        padding: padding ?? const EdgeInsets.all(0.0),
        constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
        ///flex
        child: new Flex(
          mainAxisAlignment: mainAxisAlignment,
          direction: Axis.horizontal,
          children: <Widget>[],
        ),
        onPressed: onPressed);
複製代碼

三、StatefulWidget 賦值

這裏咱們以給 TextField 主動賦值爲例，其實 Flutter 中，給有狀態的 Widget 傳遞狀態或者數據，通常都是經過各類 controller 。如 TextField 的主動賦值，以下代碼所示：

final TextEditingController controller = new TextEditingController();

 @override
 void didChangeDependencies() {
    super.didChangeDependencies();
    ///經過給 controller 的 value 新建立一個 TextEditingValue
    controller.value = new TextEditingValue(text: "給輸入框填入參數");
 }

 @override
  Widget build(BuildContext context) {
    return new TextField(
     ///controller
      controller: controller,
      onChanged: onChanged,
      obscureText: obscureText,
      decoration: new InputDecoration(
        hintText: hintText,
        icon: iconData == null ? null : new Icon(iconData),
      ),
    );
  }
複製代碼

其實 TextEditingValue 是 ValueNotifier，其中 value 的 setter 方法被重載，一旦改變就會觸發 notifyListeners 方法。而 TextEditingController 中，經過調用 addListener 就監聽了數據的改變，從而讓UI更新。

固然，賦值有更簡單粗暴的作法是：傳遞一個對象 class A 對象，在控件內部使用對象 A.b 的變量綁定控件，外部經過 setState({ A.b = b2}) 更新。

四、GlobalKey

在Flutter中，要主動改變子控件的狀態，還可使用 GlobalKey。好比你須要主動調用 RefreshIndicator 顯示刷新狀態，以下代碼所示。

GlobalKey<RefreshIndicatorState> refreshIndicatorKey;
  
 showForRefresh() {
    ///顯示刷新
    refreshIndicatorKey.currentState.show();
  }

  @override
  Widget build(BuildContext context) {
    refreshIndicatorKey =  new GlobalKey<RefreshIndicatorState>();
    return new RefreshIndicator(
      key: refreshIndicatorKey,
      onRefresh: onRefresh,
      child: new ListView.builder(
        ///·····
      ),
    );
  }
複製代碼

五、Redux 與主題

使用 Redux 來作 Flutter 的全局 State 管理最合適不過，因爲Redux內容較多，若是感興趣的能夠看看篇章二，這裏主要經過 Redux 來實現實時切換主題的效果。

以下代碼，經過 StoreProvider 加載了 store ，再經過 StoreBuilder 將 store 中的 themeData 綁定到 MaterialApp 的 theme 下，以後在其餘 Widget 中經過 Theme.of(context) 調你須要的顏色，最終在任意位置調用 store.dispatch 就可實時修改主題，效果如後圖所示。

class FlutterReduxApp extends StatelessWidget {
  final store = new Store<GSYState>(
    appReducer,
    initialState: new GSYState(
      themeData: new ThemeData(
        primarySwatch: GSYColors.primarySwatch,
      ),
    ),
  );

  FlutterReduxApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// 經過 StoreProvider 應用 store
    return new StoreProvider(
      store: store,
      ///經過 StoreBuilder 獲取 themeData
      child: new StoreBuilder<GSYState>(builder: (context, store) {
        return new MaterialApp(
            theme: store.state.themeData,
            routes: {
              HomePage.sName: (context) {
                return HomePage();
              },
            });
      }),
    );
  }
}
複製代碼

六、Hotload 與 Package

Flutter 在 Debug 和 Release 下分別是 JIT 和 AOT 模式，而在 DEBUG 下，是支持 Hotload 的，並且十分絲滑。可是須要注意的是：若是開發過程當中安裝了新的第三方包，而新的第三方包若是包含了原生代碼，須要中止後從新運行哦。

pubspec.yaml 文件下就是咱們的包依賴目錄，其中 ^ 表明大於等於，通常狀況下 upgrade 和 get 都能達到下載包的做用。可是：upgrade 會在包有更新的狀況下，更新 pubspec.lock 文件下包的版本 。

3、問題處理

Waiting for another flutter command to release the startup lock ：若是遇到這個問題：

一、打開flutter的安裝目錄/bin/cache/ 
  二、刪除lockfile文件 
  三、重啓AndroidStudio
複製代碼

dialog下的黃色線 yellow-lines-under-text-widgets-in-flutter：showDialog 中，默認是沒使用 Scaffold ，這回致使文本有黃色溢出線提示，可使用 Material 包一層處理。
TabBar + TabView + KeepAlive 的問題能夠經過 TabBar + PageView 解決，具體可見篇章二。