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
