Flutter macOS 開發環境搭建筆記
本文主要記錄在 macOS 系統上搭建 Flutter 開發環境的過程，以及遇到的問題和解決辦法，供大家參考。
1. 系統環境
Flutter 同時支援在 Windows、macOS、Linux 等主流作業系統上進行開發，如下圖所示：
本文的環境搭建主要參考了官方的 ofollow,noindex">Get started 教程，同時你也可以在 Flutter 中文網 或者 Flutter 中文開發者論壇 查閱相關中文翻譯文件。
我們這裡進行實踐的作業系統資訊為：
macOS Mojave 10.14 (64-bit)
2. 安裝 Flutter 和 Dart SDK
2.1 網路環境
在安裝之前，先插個題外話，由於眾所周知的原因，Google 提供的服務在中國大陸一直都是無法訪問或者速度很慢，所以在下載一些資源時，我們通常需要翻牆或者選擇一個與官方同步的可信的映象站點作為替代。不過，Flutter 官方也很貼心地專門為中國使用者寫了一個教程，如何更快的下載資源、搭建環境以及執行 flutter 相關命令：
2.2 獲取 Flutter
根據 Flutter SDK Archive 頁面的介紹，我們可以選擇安裝三種不同版本的 Flutter，分別如下：
-
Dev channel：開發版本
-
Beta channel：測試版本
-
Master channel：最新版本，直接從 GitHub repo 中克隆獲取最新的 SDK。
由於 Flutter 目前還沒正式釋出 Release 版本，所以我們建議選擇相對比較穩定 Beta 版 SDK。在本文撰寫的時候，最新的為 v0.10.2-beta，下載地址如下：
但由於這個 URL 在國內下載特別慢（400+ MB），根據 Using Flutter in China 介紹，我們可以改成如下國內映象地址進行下載，替換字首為 https://storage.flutter-io.cn 即可：
2.3 安裝 Flutter
我們把上述下載的 flutter_macos_v0.10.2-beta.zip 拷貝到 $HOME/Flutter/ 目錄下（可自行選擇任意其他目錄），然後進行解壓：
$ cd ~/Flutter $ unzip ./flutter_macos_v0.10.2-beta.zip
此時， flutter 命令就在解壓後的 flutter/bin 目錄下。比如在我們這裡，其完整路徑為： $HOME/Flutter/flutter/bin/flutter 。
接下來，我們需要把 flutter 命令所在目錄新增到系統的 PATH 變數中，方便後續在任何終端直接使用，而不用切換到特定目錄。
我們可直接在命令列中執行 export PATH=$PATH:$HOME/Flutter/flutter/bin ，不過該命令只能在當前的終端視窗暫時設定 PATH 變數，關閉終端後就失效了。
因此，要想永久地將 Flutter 新增到 PATH 中，需要在 $HOME 使用者目錄下的 .bashrc 、 .bash_profile 或者 .vimrc 等檔案中（不同系統終端環境可能會不太一樣）新增如上命令。由於我的 macOS 的終端環境使用的是 ZSH ，所以我需要在 $HOME/.zshrc 檔案中進行新增。
此外，對於國內使用者在使用 flutter 命令時，同樣地，我們需要切換映象源以加快速度，節省時間。根據 文件 ，需要為此設定兩個環境變數： PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL ，然後再執行 Flutter 命令列工具。
這裡推薦 Flutter 官方中文社群的映象如下，當然我們可以 選擇其他的源 。
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
綜上，這裡我們需要在 $HOME/.zshrc 檔案中新增如下幾行命令：
2.4 Dart SDK
我們知道，Flutter 使用 Dart 語言進行開發應用程式，為了方便起見，我們下載的 Flutter SDK 已經同時包含了 Dart SDK，放在下面目錄中：
-
flutter/bin/cache/dart-sdk
3. 平臺設定/編譯環境
在新增完 flutter 命令到 PATH 後，我們可以開啟終端，在命令列中執行 flutter doctor ，進行檢查相關工具或者配置是否完整，我們第一次執行時，可能會得到如下圖資訊：
我們看到一堆問題，接下來，我們只要根據上述結果和建議，一步步進行完善配置就好了。
此外，macOS 支援為 iOS 和 Android 開發 Flutter 應用程式，所以我們同時也需要先完成這兩個平臺的相關編譯環境配置，以便能夠構建並執行第一個 Flutter Demo。
3.1 iOS 配置
-
安裝 Xcode 9.0+ 或更新版本；
-
設定 iOS 模擬器；
-
安裝 Homebrew 、 Cocoapod 、 Carthage/Carthage" target="_blank" rel="nofollow,noindex">Carthage 等 iOS 開發必要工具；
-
安裝 iOS 真機除錯工具：
$ brew update $ brew install --HEAD usbmuxd $ brew link usbmuxd $ brew install --HEAD libimobiledevice $ brew install ideviceinstaller ios-deploy
PS：如果你安裝上述工具出行錯誤，請參考這個 issues ，先解除安裝 usbmuxd 和 libimobiledevice 後重新安裝，加上 --HEAD 。
3.2 Android 配置
-
下載安裝 Android Studio，然後啟動根據“安裝嚮導”進行相關初始化配置；
-
設定你的 Android 裝置
-
設定 Android 模擬器
更詳細的教程請參考官方 Platform setup ，或者上述相關中文翻譯文件。
4. 配置 IDE
接下來我們需要配置一下 Flutter 的整合開發環境（IDE），以方便我們進行開發和除錯。
我們可以使用任何文字編輯器與 命令列工具 來構建 Flutter 應用程式。但這裡推薦在 Android Studio、IntelliJ 或 VS Code 等優秀的編輯器上新增 Flutter 開發外掛，即可獲得程式碼自動補全，語法高亮，Widget 編輯助手，執行和除錯的支援等一系列實用的功能。
4.1 命令列
- 建立工程
Create a new Flutter project in the specified directory.
flutter create <output directory>
- 連線裝置
List all connected devices.
flutter devices
- 執行工程
Run your Flutter application on an attached device or in an emulator.
flutter run [options]
4.2 Visual Studio Code
VS Code 是一個輕量級編輯器，支援 Flutter 執行和除錯。
- 安裝 VS Code
我們可以在 這裡下載 並安裝最新版本的 VS Code，本文安裝的版本為 1.29.0
- 安裝 Flutter 和 Dart 外掛
啟動 VS Code，在選單欄中選擇 View（檢視）-> Command Palette…（命令面板…），輸入 ‘install’，然後選擇 Extensions: Install Extension 安裝擴充套件，接著在搜尋框輸入 ‘flutter’， 在搜尋結果列表中選擇 ‘Flutter’，點選 Install（安裝），同時會自動安裝 ‘Dart’ 依賴，最後重啟 VS Code 即可生效。
- 驗證配置
開啟 View（檢視）-> Command Palette…（命令面板…），輸入 ‘doctor’，然後選擇 Flutter: Run Flutter Doctor，進行檢查：
檢視 OUTPUT 視窗中的輸出是否有問題，並按建議解決即可。
至此，VS Code 的 Flutter 開發環境搭建好了。
4.3 Android Studio
Android Studio 為 Flutter 提供了更加完整的 IDE 體驗，畢竟它們都是 Google 的“親兒子”。
- 安裝 Android Studio
我們可以在 這裡下載 並安裝最新版本的 Android Studio（推薦 3.0+ 或更高版本），本文安裝的版本為 3.2.1 ，此外 Android Studio 依賴 Java 環境，我們這裡安裝的 JDK 版本如下：
Java 8 Update 191 (1.8.0_191-b12)
當然，我們也可以選擇使用 IntelliJ IDEA 。
- 安裝 Flutter 和 Dart 外掛
啟動 Android Studio，開啟外掛設定（在 macOS 上為 Preferences -> Plugins），然後選擇 Browse repositories… 按鈕，
搜尋 Flutter 外掛，點選 Install（安裝）
此時會自動提示安裝 Dart 外掛，點選 Yes 接受即可。
最後，重啟 Android Studio，Flutter 開發環境就搭建好了。
4.4 大功告成
當我們完成上面所有開發環境的配置，並通過 USB 連線上真機裝置或者開啟 iOS/Android 模擬器，然後再執行 flutter doctor 可得到如下結果，一切 OK 了：
5. Hello World
這部分我們簡單介紹一下如何建立一個 Flutter 的 Hello World 工程。上面提到，我們可以使用命令列、VS Code 或者 Android Studio/IntelliJ 等作為開發環境，綜合比較，我們推薦 Android Studio。
啟動 Android Studio，如下圖，選擇 Start a new Flutter project（或者在選單欄選擇 File -> New Flutter Project）
接下來，我們可以參考官方的 Test drive 教程以及 Android Studio 的嚮導，建立工程，然後編譯執行，並體驗 Flutter 的熱過載（Hot Reload），詳見上述教程，我們這裡不再贅述。
這裡需要注意的是，當我們在 Android Studio 建立新的 Flutter 工程，或者開啟一個已有的 Flutter 工程時，可能會提示沒有配置 Flutter 或者 Dart SDK 環境，如下圖：
此時，我們需要開啟 Android Studio 的偏好設定（Preferences），手動配置相關路徑。
首先選擇 Preferences -> Languages & Frameworks -> Flutter，填寫 Flutter SDK path，如下圖所示，我們這裡填寫的路徑為 $HOME/Flutter/flutter （取決於你 Flutter 的安裝路徑）：
同樣地，在左側選中 Dart，然後填寫 Dart SDK path，如下圖，我們這裡填寫的路徑為 $HOME/Flutter/flutter/bin/cache/dart-sdk （取決於你 Flutter 的安裝路徑）：
