owned this note   changed 2 years ago  
Linked with GitHub

Flutter 踩雷心得

tags: 2018, R1
位置: R1
講者：楊維中

iOS app 千萬不要很晚才審核
0.8版就可以先送審核
在0.8版到1.0版之間解決apple 的issue

什麼是flutter

  • 設計給 Google 一套尚未正式推出的作業系統 Fuchsia 使用的應用程式框架

  • 目前可以嵌入 iOS 和 Android app 中

  • 架構上像是精簡過的瀏覽器

    • 以現在硬體，不輸給 Native App Framework 的流暢程度
    • 瀏覽器的組成
      • HTML loader -> HTML Parser -> DOM -> Renderer -> JavaScript Engine
    • Flutter 的組成
      • Widegt：組成畫面的數著結構
        • Stateless Widget: 建立之後不會改動的 Widget
        • Stateful Widget:
      • Renderer: 將 widget 畫出來
      • Dart VM: 用來組成 Widget 的程式語言 runtime

  • 越接近 Web app 的 Mobile app，越適合使用 Fluter 開發

  • Flutter 不適合

    • 遊戲： Flutter不鼓勵頻繁重繪
    • 需要用到平台或硬體、功能
    • 在 iOS 不能用 3D touch

  • 目前還有的問題

    • 多國語系支援
    • iOS 12 中文預設有很奇怪的明體字
      使用蘋果蘋果蘋方蘋果蘋果蘋果蘋果蘋果蘋果字

導入Flutter

  • 開發
    • Dart 程式語言
    • 認識 Flutter Widget
    • 習慣 Flutter Pattern
    • 知道Flutter原廠還有哪些bug
    • Flutter Plug-in開發
  • Build System
  • 測試

發行版本號碼管理

  • Flutter預設iOS/Android App共用同一個寫在pubspec.yml檔案中的版號
    • iOS會寫入到info.plist中
    • Android會寫入到gradle設定中
  • 在呼叫flutter build指令時，可以設定 –build-name與–build-number
    • iOS正常

編譯流程

  • 兩段式的編譯
  • 先將 Dart code編譯程native code
  • 然後
    • iOS：拉Cocoa Pods、在app bundle中嵌入Flutter framework
      • 拉 Cocoa Pods
      • app bundle 遷入 Flutter framework
      • 編譯 ObjC/Swift Code
      • 打包
      • code Sign

混淆 dart Code

  • 官方提供一套 Dart Obfuscator
  • 但是還沒正式測試過

Flutter不支援Xcode10的New Build System

Dependency管理

  • FLutter 使用 dart pub 管理套件，但是如果一個 plugin 用到了 device channel，iOS 用 CocoaPods 管理，Android 使用 gradle
  • dart pub
    • iOS -> Cocoa Pods
      • 可能每個 plugin 的 deployment target 不同，需要自己調整 pod 設定
    • Android -> gradle
      • 可能每個 plugin 使用的 Android API, Kotlin, Google Service 版本不同發生衝突
  • 所以你還是要有人懂這些

Android的32/64問題

  • Flutter還不支援Android App Bundle
  • 一次只會編譯32或64的 libflutter.so
  • 開發版本中，可以用CLI編出兩種版本
    • flutter build apk –debug –target-platform android-arm
    • flutter build apk –debug –target-platform android-arm64
  • Release 版本目前先只保留 armv7a

X86 Android

  • Flutter沒有 X86的 Release Binary
    • 但是外面有以卵擊石的 x86 Android 手機
    • Chromebook
  • 去GooglePlay後台禁止這些裝置下載你的app

環境的版本

  • Flutter/Dart的版本：Dart Pub現在很多package不支援Dart2

CI

  • MS App Center 還不支援 Flutter app的設定
  • Travis CI應該要可以，但我搞不起來
    • 常常遇到無法偵測抓下來的 flutter runtime 的版本，導致無法更新dependency (pub get失敗)
  • 我們還是在用 Jenkins

Testing

  • 使用Flutter開發，就等於是跟XCTest；XCUITest等框架說再見了
  • Flutter 有兩種測試框架：
    • Dart的單元測試
    • Flutter Widget 測試

Dart 單元測試

  • 如果是可以獨立運作的code，建議改寫成獨立的Dart package(可以用stagehand建立)
    使用

Widget 測試

  • 可以把整個 App 的根widget 跑起來，或是單獨將一個 widget 包進一個app 容器裡頭測試，檢查一些行為之後…
  • 不好寫：Flutter基本上禁止在結束測試的時候，widget當中還有非同步的code在執行，會丟出exception
  • 一個可以跑Widget Test……

線上問題的處理

  • 有些事情你想不到：在ListView裡頭使用StatefulWidget會跳出Exception

團隊的組成

  • 基本上要有夠資深的iOS/Android工程師
  • 下一步，就是這兩個工程師應該還要有各自的待哩，之後可以加入只寫Dart的人
  • 先以大量的單元測試加上QA手動測試為主

建議在新專案才導入 Flutter

  • 在原本的 iOS/Android 上導入 Flutter，技術上可行， iOS/Android 可以嵌入 Flutter view
  • 但軟體工程上很麻煩

改變思維

  • Flutter的Controller不是iOS的controller
    • iOS的Controller是畫面的基本單位
    • Flutter的Widget自程天地，當外不想操作某個Widget時，才提供一個Controller當作接口
  • Flutter的gelegate不是iOS的delegeate
    • iOS的delegate是集中處理callback的物件
  • 在iOS上，如果有個連線，我們可能會在ViewController中呼叫NSURLSession以及NSURLSessionTask

換台新電腦吧如果你要寫Flutter

因為你需要同時開…

  • Xcode
  • Android Studio
  • 模擬器
Select a repo