Hello Flutter，船長初體驗
- 2019 年 10 月 4 日
- 筆記
菩提本無樹， 程序亦非猿 時不時 8:38 推送優質文章，覺得有用，置頂加星標
Hi，船員們好，我是初次體驗了 Flutter 的船長。
前幾天 Google 發佈了 flutter.cn 以及 release 了 Flutter 1.9 ，今天船長沒忍住，嘗試了下 Flutter。
分享下我跑 Hello Flutter 的經歷吧，以及一些淺薄的體驗。
下載 Flutter SDK 並配置環境變量
Flutter 的 SDK 需要獨立下載，需要去 https://flutter.cn/docs/development/tools/sdk/releases?tab=macos 下載最近的 sdk，放到某個目錄。
然後解壓，並配置環境變量。
export PATH="$PATH:`pwd`/flutter/bin" source ~/.zshrc #替換你自己的 shell 配置文件路徑
Flutter 依賴一些其他的工具，可以運行 flutter doctor 命令來查看依賴是否完善。
拿我的電腦舉例：
➜ flutter git:(stable) flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14 18A391, locale zh-Hans-CN) [!] Android toolchain - develop for Android devices (Android SDK version 28.0.3) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [!] Xcode - develop for iOS and macOS (Xcode 10.1) ! CocoaPods out of date (1.6.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade: sudo gem install cocoapods pod setup [!] Android Studio (version 3.5) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] VS Code (version 1.33.0) [!] Connected device ! No devices available ! Doctor found issues in 8 categories.
flutter doctor 檢查出了幾個問題：
問題 1：Some Android licenses not accepted. To resolve this, run:
flutter doctor --android-licenses
然後按提示輸入 y，直到所有的 licenses 都被 ac，到最後展示成這樣。
Accept? (y/N): y All SDK package licenses accepted
問題 2：CocoaPods out of date (1.6.0 is recommended). To upgrade:
sudo gem install cocoapods pod setup
第一步會安裝 cocoapods 各種工具，第二步驟會 Setting up CocoaPods master repo。
耐心等待即可。
最後看到這個就算對了：
CocoaPods 1.8.0.beta.2 is available. To update use: `sudo gem install cocoapods --pre` [!] This is a test version we'd love you to try. For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.8.0.beta.2 Setup completed
問題 3：
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
解法，在 AS 安裝一下 Flutter 插件。
再次驗證下：
➜ ~ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14 18A391, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 10.1) [✓] Android Studio (version 3.5) [✓] VS Code (version 1.33.0) [✓] Connected device (1 available)
可以看到，必須的都已經 OK 了。
配置 iOS 開發環境
- 安裝 Xcode，在 AppStore 下載即可，要求 9.0 及以上
- 配置 Xcode command-line tools :
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer - 運行一次 Xocde 或者通過輸入命令
sudo xcodebuild -license來確保已經同意 Xcode 的許可協議。
如果以前下載過 Xcode 用過終端，那麼應該沒問題。
然後啟動一個 iPhone5S 之後版本的模擬器，我選了 XS。
open -a Simulator
創建一個 Flutter 工程，並部署到模擬器。
flutter create helloflutter cd helloflutter flutter run
執行上面三個命令就可以創建並部署到模擬器。
創建的工程目錄：
➜ helloflutter ll total 32 -rw-r--r-- 1 mingjue staff 542 9 11 15:48 README.md drwxr-xr-x 12 mingjue staff 384 9 11 15:58 android drwxr-xr-x 9 mingjue staff 288 9 11 16:00 build -rw-r--r-- 1 mingjue staff 896 9 11 15:48 helloflutter.iml drwxr-xr-x 8 mingjue staff 256 9 11 15:49 ios drwxr-xr-x 3 mingjue staff 96 9 11 15:48 lib -rw-r--r-- 1 mingjue staff 3279 9 11 15:48 pubspec.lock -rw-r--r-- 1 mingjue staff 2664 9 11 15:48 pubspec.yaml drwxr-xr-x 3 mingjue staff 96 9 11 15:48 test
註：代碼放在 lib/ 下面。
運行日誌：
➜ helloflutter flutter run Launching lib/main.dart on iPhone XS in debug mode... Running Xcode build... ├─Assembling Flutter resources... 8.0s └─Compiling, linking and signing... 15.2s Xcode build done. 26.1s Syncing files to device iPhone XS... 2,387ms (!) ? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". An Observatory debugger and profiler on iPhone XS is available at: http://127.0.0.1:49877/1KhXC2nzaFc=/ For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
跑起來如圖：
注意：如果要部署到真機，還需要開發者賬號，我沒有就沒試。
配置 Android 開發環境
Android 也有模擬器跟真機的選擇，鑒於 Android 模擬器的性能，我選擇了真機。
真機跟普通的 Android 開發差不多，開啟開發者模式，允許 USB debugging 即可。
然後運行flutter devices命令確保 Flutter 可以識別我們的設備。
同 iOS，運行 flutter run 部署到 Android 手機上。
➜ helloflutter flutter run -d 91ab18e5 Launching lib/main.dart on MI NOTE LTE in debug mode... Initializing gradle... 17.3s Resolving dependencies... 81.4s Running Gradle task 'assembleDebug'... Running Gradle task 'assembleDebug'... Done 43.2s Built build/app/outputs/apk/debug/app-debug.apk. Installing build/app/outputs/apk/app.apk... 18.5s Syncing files to device MI NOTE LTE... 2,104ms (!) ? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". An Observatory debugger and profiler on MI NOTE LTE is available at: http://127.0.0.1:50410/wvUWXqgNfBE=/ For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
在 Android 上啟動截圖：
註：當電腦連着多個設備或模擬器時，flutter run 可以通過 -d deviceId 來指定要 run 到哪個設備，例如flutter run -d 91ab18e5，或者flutter run -d all 部署到所有的設備。
感受
這次嘗試把 iOS 跟 Android 都走通了，Flutter 整體在配置上還是需要一些時間的，比較得支持多個端，需要分別配置環境，如果網絡順暢的話還是比較順利，關於 Web 文檔上還沒有出暫時沒有嘗試，等後續學習了再多體驗體驗。
跑起來看 Flutter 在 iOS 模擬器上跑較快，在 Android 上冷啟動有點慢。整體上語法看上去跟 React 非常類似，但是層級上代碼多了可讀性有點差（其實想說巨差），然後 hotreload 速度杠杠的，跟 web 開發一樣，非常爽。
等後續船長多體驗了再來分享。
讚賞不開了，求擴展、分享，謝謝！
資料
https://flutter.cn/docs/get-started/install/macos
