Flutter v1.12.13 的一些坑

法的空間發表於2020-01-14
Flutter

最近忙著升級Flutter SDK版本，遇到了一些問題，於是記錄下來。

資原始檔命名

cannot load assets file starting with "#" from the rootBundle after install

  • #開頭 #xxxx.png
  • 帶空格 xxx xxx.png
  • 中文字元 4401-校歷.svg
  • 特殊字元非拉丁

解決

  • 修改命名方式
  • 執行git revert 383e90eb13bdc50ca0cce9f2575329ba8593506e，回滾Flutter版本
  • 坐等官方發hotfix

命名不規範，alex兩行淚

ios bitcode

因為某些問題，現存的ios 專案無法開啟 bitcode，但是v1.12.13中Flutter預設開啟了這個，並且引擎也是enable bitcode了的。這個會導致整個專案無法編譯成功。網上到處搜尋了下，也問了一些ios大佬，最終Flutter Team大佬告訴了使用命令來抽離出bitcode的辦法。

  • 執行命令flutter build ios-framework --no-debug --no-profile，生成App.framework(20.2MB)和Flutter.framework(369.8MB)
➜  flutter_module flutter build ios-framework --no-debug --no-profile
Building framework for com.example.flutterModule.cc in release mode...
 ├─Populating Flutter.framework...                               1,486ms
 ├─Building Dart AOT for App.framework...
  121.1s (!)
 ├─Assembling Flutter resources for App.framework...                0.2s
 └─Moving to build/ios/framework/Release                            0.0s
複製程式碼
  • cd 到framework，使用xcrun bitcode_strip -r app -o app抽離bitcode app 為App.framework 裡面的那個可執行檔案
    Flutter v1.12.13 的一些坑
    Flutter v1.12.13 的一些坑

同理也給Flutter.framework做相同操作xcrun bitcode_strip -r Flutter -o Flutter

Flutter v1.12.13 的一些坑
Flutter v1.12.13 的一些坑

抽離之後App.framework(10.6MB)和Flutter.framework(39.2MB)

安卓混合開發程式碼遷移

add-to-app官方文件 喵在Flutter 升級 1.12 適配教程中提到了關於外掛註冊的變化，這部分我就不再提了。

  • FlutterActivity 設定透明 官方api有問題，BackgroundMode列舉並沒有暴露出來
  FlutterActivity
    .withNewEngine()
    .backgroundMode(FlutterActivity.BackgroundMode.transparent)
    .build(context)
複製程式碼

暫時可以通過下面程式碼來設定

       Intent intent = FlutterActivity.withNewEngine().initialRoute('route').build(activity);
       intent.putExtra("background_mode","transparent");
       activity.startActivity(intent);
複製程式碼
  • 官方支援快取引擎

但是我沒有發現初始化route的方法,如果從原生進一個flutter頁面就要new一個引擎，那麼這個 FlutterEngineCache的作用是？希望有知道的小夥伴能答疑一下。

更新

你可以通過 flutterEngine.getNavigationChannel().setInitialRoute('my/route');

但是頁面堆載管理就比較複雜了，這也是鹹魚flutter_boost為我們做的事情了。

建立

    // Instantiate a FlutterEngine.
    flutterEngine = new FlutterEngine(this);

    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.getDartExecutor().executeDartEntrypoint(
      DartEntrypoint.createDefault()
    );

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine);
複製程式碼

使用

startActivity(
      FlutterActivity
        .withCachedEngine("my_engine_id")
        .build(currentActivity)
      );
複製程式碼

混合開發除錯熱過載

混合開發一般都是安卓aar，ios framework這種方式，v1.12.13裡面支援除錯和熱過載等功能。

方法很簡單，以安卓為例子。

  1. 打debug的flutter aar，引用到安卓專案中，你可以用maven本地引用，也可以上傳到自己的maven庫中遠端引用。
  2. debug執行安卓專案
  3. vscode中開啟你的flutter module專案，vscode的command palette中找到 debug:flutter attach to process(devices)
  4. 進去你安卓專案中的flutter模組，這個時候vscode會同步檔案到裝置中。

我試了下可以debug，可以熱過載，但是感覺有bug，第一次進去不會進斷點，必須熱過載一下。

ios的話，有bug，熱過載報錯

對於之前苦逼進行混合除錯的我來說，已經很不錯了，將就用了，希望官方繼續完善。

安卓華為裝置閃退

華為裝置閃退

  • Huawei DUB AL00A
  • Huawei DUB AL00
  • Honor BKK AL10
  • Huawei ARS AL00
  • Huawei DUB AL20

issue裡面已有大佬提出瞭解決方案，回滾引擎。官方也做了回滾，坐等hotfix。

在官方回覆的這段時間，嘗試了接觸了一下flutter引擎這個東西（本來想通過重新打包引擎來去掉bitcode，Creating-an-iOS-Bitcode-enabled-app，以及重新打包引擎來解決安卓華為閃退)，可以不用，但是要會。

  1. 注意下交叉編譯平臺只有mac同時支援安卓和ios

  • Linux supports cross-compiling artifacts for Android, but not iOS.

  • macOS supports cross-compiling artifacts for Android and iOS.

  • Windows doesn't support cross-compiling artifacts for either Android or iOS.

mac真香？能交叉編譯安卓和ios的只有mac，讓我大窗戶兒使用者情何以堪。後面為mac上面操作

  1. fq設定代理，你懂的
    export http_proxy=http://127.0.0.1:1087
    export https_proxy=http://127.0.0.1:1087
複製程式碼
  1. 下載google的depot_tools工具包 depot_tools是個工具包，裡面包含gclient、gn和ninja等工具。是Google為解決Chromium原始碼管理問題為Chromium提供的原始碼管理的一個工具。

  • clone程式碼

    git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

  • 設定環境變數

    export PATH="$PATH:/xxx/xxx/depot_tools"

  1. 到https://github.com/flutter/engine 下載程式碼到本地，官方建議你fork，這樣可以方便更新，看個人情況
  2. 在engine目錄下面建立.gclient檔案
  • 可以使用fork的branch,新增下面內容，替換你fork的名字
solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:<your_name_here>/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]
複製程式碼
  • 也可以指定一個某個版本，比如我們指定回滾奔潰的版本
solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "https://github.com/flutter/engine.git@2994f7e1e682039464cb25e31a78b86a3c59b695",
    "custom_deps": {
      'src/third_party/skia': "https://skia.googlesource.com/skia.git@768f900a88cbfc5237e8edcc16aadde32536ed3e",
      'src/third_party/wuffs': 'https://skia.googlesource.com/external/github.com/google/wuffs.git@65e7b2b6c98a4d35e26bc2fc437e2e00f1393dc2',
    },
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]
複製程式碼
  1. cd 到engine目錄 執行gclient sync，這是一個漫長的過程而且網路沒有問題的話
  2. Flutter的引擎是基於Ninja進行構建的，Ninja是Google為了改進編譯速度而開發出來的， Chromium目前也是通過Ninja進行構建的，沒辦法Flutter team的成員大部分來之Chromium

全部引數組合

構建主要引數

  • optimized/unoptimized(是否優化),
  • debug/profile/release
  • cpu 安卓分arm，arm64，x86和x86_64
  • cpu ios 分arm，arm64，還有一個模擬器引數--simulator
  1. cd到src/flutter/tools下面

Flutter v1.12.13 的一些坑

執行命令 gn --android --runtime-mode=release 3618個檔案將會編譯，根據你的mac的效能可能是半小時至一輩子的時間。

編譯完成之後會在src/out下面生成android_release資料夾

Flutter v1.12.13 的一些坑

對於安卓來說，你可以直接從這個資料夾裡面把Flutter.so給弄出來直接使用

  1. cd到src/flutter/tools下面

執行命令gn --runtime-mode=release 4271個檔案，這裡我的mac被alex的mac彎道超車，我花了半天時間才編譯完畢。。

編譯完成之後會在src/out下面生成host_release資料夾，為啥要做這一步呢，如果你想用你編譯的引擎來打包的話，這個資料夾是必須生成的。

  1. 使用本地引擎打包

flutter build apk --target-platform android-arm --local-engine-src-path /Users/roott/Documents/Tools/flutter/engine/src --local-engine=android_release

  • --local-engine-src-path指向engine/src

  • --local-engine 指向的是engine/src/out下面的android_release目錄

Flutter v1.12.13 的一些坑

結語

最近發現官方在弄Fuchsia,加上聽小道訊息說國內廠商都在適配Fuchsia，2020年我們應該很快就能吃上Fuchsia了，新的一年新的期待。

歡迎加入Flutter Candies，一起生產可愛的Flutter小糖果( flutter-candiesQQ群:181398081)

最最後放上Flutter Candies全家桶，真香。

Flutter v1.12.13 的一些坑

相關文章