Flutter 踩雷心得
===

###### tags: `2018`, `R1`

##### 位置: R1
##### 講者：楊維中

{%slideshare 貼這裡xxxx/yyyy %}

---

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
- 模擬器