本人計劃用 flutter 重寫公司的老的應用，所以在業餘時間進行 flutter 的苦逼學習之旅。我深知厚積而薄發，不積矽步無以至江河的道理，學習過程難免有痛苦也有掙扎，好記性真不如爛筆頭，隨著年紀增大更加是記不住那麼多瑣事了。所以要寫部落格來鞏固和方便自己後續快速查閱，當然如果能對讀者朋友有一點點幫助那真是很開心的一件事。本文為整個學習系列的開篇。
Android Studio 和 Xcode 安裝
本篇是針對 Mac os 系統來搭建 flutter 環境的，因為本人一直以來都用 Mac，所以其他平臺我也就沒去搭建了（很懶的?）。 也因為本人碰巧也開發過 Android 和 IOS 原生應用，因此在某些環境設定上顯得輕車熟路。筆者開發 Android 使用 Android Studio, 開發 IOS 使用 Xcode， 因此我也是比較推薦讀者也使用對應的環境，當然你也可以使用 IntelliJ IDEA(Android Studio 也是基於此來定製的，因此兩者搭建 flutter 的環境一致) 和 Visual Studio Code (微軟開源的一款編輯器，內建很多豐富的外掛可以使用)。
首先安裝 Android Studio, 你可以一併將 SDK manager 下載。安裝完畢後下載不同平臺的 SDK 版本, 點選 perfrences -> Android SDK, 如圖所示：
你可以看到打勾的都是我已經下載完成的，為什麼下載這幾個呢？是因為包含目前主流的 SDK，更低的就沒必要在下載了。當然你也可以只下載最新的幾個版本(7.0 以上)。
然後是安裝 Xcode 版本，在 App store 直接搜尋 Xcode 然後安裝即可，直接執行，如果是第一次開啟會提示允許 Xcode 許可協議或通過命令 sudo xcodebuild -license 同意。 開啟後如圖所示：
Flutter SDK 安裝
搞定了開發環境，接下來就是 flutter sdk 下載了，首先如果你是具備梯子的使用者，你可以直接看官方的文件, 如果不是的話也沒關係，你可以看中文社群。 我就以中文社群來配置。
- 配置映象訪問地址
當然你要留意這個映象地址是否改變了。你可以將下面的配置加入到你的 shell 環境配置中，筆者使用的是 oh my zsh 也是一種 shell 環境， 預設使用的是 bash, 你是 bash 使用 Vi 或 其他編輯器開啟 @HONE/.bash_profile 加入如下的配置。如果跟我一樣使用的是 zsh 環境就加入到 ~/.zshrc。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼-
重啟終端或者使用 source $HOME/.bash_profile 重新整理終端視窗
-
下載 flutter 安裝包
// 通過 clone 的方式獲取 flutter, 當然你也可以去官方網站下載壓縮包然後解壓
git clone -b dev https://github.com/flutter/flutter.git
// 如步驟1方式加入到shell配置, 這樣就可以使用 flutter 命令啦
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
// 使用 doctor 檢查當前是否有依賴需要安裝
flutter doctor
複製程式碼- 執行 flutter doctor
可以看到 flutter 為我們檢查到當前環境那些未安裝，可以看到筆者AS、Xcode、VSCode、IDEA 都有，因為我並不實用 VSCode 和 IDEA 去開發。因此就不去配置了，可以看到 IOS環境沒有報錯， Android 環境提示我執行 flutter doctor --android-licenses 然後一路同意即可, 如下圖， 就可以看到Android 和 IOS 環境都解決了。接下來就可以開發了。
當然如果沒有錯是最好的，但是大部分來說，如果你是前端轉過來的開發者可能你的環境就會報錯。常見會出現 IOS 工具鏈錯誤錯誤。你只需要按照它的提示一步步安裝即可。
- 安裝 Android Studio flutter 外掛
Preferences -> Plugins，搜尋 flutter 然後直接安裝即可。
新建一個 flutter 工程執行
如果所示，開啟 AS(Android Studio) 然後選擇 start a new Flutter project, 然後選擇 Application 填寫工程名稱（小寫字母，單詞之間用_ 連線）和報名(一般域名倒寫，例如： com.hxj.xxx)。下圖是我新建的工程名稱為 hello_flutter
我建議還是要用真實手機來除錯，當然用模擬器也可以，不過會影響電腦的效能。比如筆者安卓使用的是紅米 7 ， IOS 模擬器使用的是 iphone6s。首先我們先點選執行按鈕，如圖所示，先來看安卓的執行環境。IOS 還是有問題的，稍後再說。
執行效果如圖所示(紅米7)
要執行 IOS 專案，首先我們先要用 Xcode 開啟專案進行一些設定，指定開發者， 我們找到當前專案下 ios 目錄，然後找到 Runner.xcworkspace 並開啟。找到圖中紅色警告的地方，需要我們指定一個開發者團隊（一般就是 apple id 賬號），現在已經支援個人開發開發和除錯應用了，釋出的話還需要購買個人開發者或企業開發賬號。如果你沒有賬號的話就註冊一個Apple ID 賬號。
指定完開發者後就可以執行了，點選左上角的播放按鈕開始執行，如果第一次 attach 真機裝置進行開發，需要同時信任你的 Mac 和該裝置上的開發證書。如果沒有提示 Trust This Computer 對話方塊讓你選擇信任，就進入設定-> 通用 -> 描述檔案與裝置管理， 然後選擇你的開發者應用進行信任即可。
如果自動簽名錯誤，可以更換 General -> Identity -> Bundle Identifier 是否唯一。
最後來看 Android 和 IOS 真機效果
Android（紅米7）
IOS（phone6s）
熱過載除錯
得益於 Dart 支援 Jit(即時編譯)，除錯 UI 變得十分方便，只要 widget 樹發生了變動，"Hot Reload" 就會起作用。如果你的熱過載不起作用（帶有閃電⚡的標誌灰色），你需要移除你的配置檔案中的代理設定。