Flutter 作為火熱的跨端工具包，在 github 上超過 120k 的關(guān)注量，可見一斑。
基于目前本人正在學(xué)習(xí) Flutter 的路上，會(huì)將整個(gè)學(xué)習(xí)的過程記錄下來。
本博文主要講解環(huán)境的搭建，先把項(xiàng)目搭建好，跑通 demo 才有玩下去的必要和成就感，你說是吧？
本人開發(fā)環(huán)境
- macOS Big Sur 版本 11.2 芯片 Apple M1
- 磁盤空間：> 2.8 GB （要求的最小的空間）
- $SHELL
echo $SHELL
/bin/bash
復(fù)制代碼
?? 之后出現(xiàn)并解決的問題都是基于本人的環(huán)境
安裝 Flutter
通過官網(wǎng)下載安裝包。
將安裝包放到自己想存放的地方。這里，我放在 文稿 -> sdk 方便管理，然后解壓下載包。
配置 flutter 的 PATH 環(huán)境變量，格式如下：
export PATH=$PATH:${pwd}/flutter/bin
或
export PATH=${pwd}/flutter/bin:$PATH
復(fù)制代碼
這里我需要編輯 ~/.bash_profile 文件，添加下面這行內(nèi)容：
export PATH=/Users/jimmy/Documents/sdk/flutter/bin:$PATH
復(fù)制代碼
安裝 IDE
作為一個(gè)前端開發(fā)者，比較偏向 VS code，直接安裝其穩(wěn)定版即可。
因?yàn)樾枰{(diào)試Android/ target=_blank class=infotextkey>安卓平臺(tái)，還需要安裝編輯器 Android Studio。 Android Studio 為 Flutter 提供了一個(gè)完整的集成開發(fā)環(huán)境。
不管 VS code 還是 Android Studio 都需要安裝 Flutter 插件。
Android Studio 我還是安裝在 文稿 -> sdk
注意安裝android studio的路徑，也許會(huì)報(bào)sdk的錯(cuò)誤。類似錯(cuò)誤 ?
# [Flutter-Unable to find bundled JAVA version(flutter doctor), after updated android studio Arctic Fox(2020.3.1) on M1 Apple Silicon](https://stackoverflow.com/questions/68569430/flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro)
復(fù)制代碼
對(duì)應(yīng)的解決方法：
flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro
驗(yàn)證
之后，運(yùn)行 flutter doctor 或者 flutter doctor -v 來檢查是否安裝了必要的安裝包。
下面是自己搭建環(huán)境的情況flutter doctor -v：
[?] Flutter (Channel stable, 2.2.3, on macOS 11.2 20D64 darwin-arm, locale
zh-Hans-CN)
• Flutter version 2.2.3 at /Users/jimmy/Documents/sdk/flutter
• Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700
• Engine revision 241c87ad80
• Dart version 2.13.4
[?] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/jimmy/Library/Android/sdk
• Platform android-31, build-tools 31.0.0
• Java binary at: /Users/jimmy/Documents/sdk/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[?] Xcode - develop for IOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.10.2
[?] Chrome - develop for the web
• Chrome at /Applications/google Chrome.app/Contents/MacOS/Google Chrome
[?] Android Studio (version 2020.3)
• Android Studio at /Users/jimmy/Documents/sdk/Android Studio.app/Contents # 留意 Android Studio 路徑
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
[?] VS Code (version 1.59.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.25.0
[?] Connected device (1 available)
• Chrome (web) • chrome • web-JavaScript • Google Chrome 92.0.4515.159
• No issues found!
復(fù)制代碼
出現(xiàn) No issues found! 的提示，說明你搗鼓成功了～
運(yùn)行 Demo
我們?cè)?VS code 上新建一個(gè)項(xiàng)目：
查看 -> 命令面板 -> Flutter: New Application Project
復(fù)制代碼
初始化項(xiàng)目之后，運(yùn)行 -> 啟動(dòng)調(diào)試，然后按照下圖運(yùn)行應(yīng)用：
如果選中 Chrome web 會(huì)直接調(diào)起你安裝好的谷歌瀏覽器。
如果選中 Start iOS Simulator 會(huì)調(diào)起 xCode 的模擬器。
如果選中 Start Pixel 2 API 31 會(huì)調(diào)起 Android Studio 的模擬器。
當(dāng)然你得在 Android Studio 上預(yù)設(shè)手機(jī)型號(hào)是哪個(gè)，不然初次在 VS code 上調(diào)不起來。
?? 如果上面的操作調(diào)不起模擬器，你還可以通過 運(yùn)行 - 以非調(diào)試模式運(yùn)行（啟動(dòng)調(diào)試） 調(diào)起來
【完】～ 下次可以更加愉快玩耍了
