前言
最近Flutter已經瘋狂的刷屏了各個技術部落格、技術網站，完全有一統天下的氣勢。所以最近也決定開始嚐嚐鮮，從零開始一步步的來探索Flutter的世界。就從環境搭建開始，記錄一下自己探索Flutter的過程。
安裝Flutter
首先我們可以在Flutter官網上面看到一些配置環境的步驟。這裡就直接開幹了，走起。
1、配置HomeBrew
我們在去配置Flutter的環境之前，需要先檢查一下HomeBrew是不是最新的。
$ brew update
複製程式碼如果沒有brew的話，可以去HomeBrew官網自行下載。這裡就不贅述了，這裡如果重新下載的話，看到下面的列印資訊就說明下載完畢了。
2、下載SDK
接下來就是去官網下載SDK了。注意，這裡下載SDK有兩種方法，一是直接git clone -b beta https://github.com/flutter/flutter.git下載，二是自己在官網下載下來，如下圖
這裡我兩種方法都試過了一遍，第一種方法實在是太慢了，在經歷了耗費一個半小時下載到94%，最後提示失敗了的過程之後，我決定還是用第二種方法，整個過程只用了3分鐘的樣子，相當滿意。下載完之後，是一個名字叫flutter_macos_v1.5.4-hotfix.2-stable.zip的壓縮包。
然後我們解壓這個zip包，把解壓出來的flutter檔案放到根目錄下即可。
3、配置環境變數
因為Flutter的SDK中包含了很多的命令列工具。我們就需要配置環境變數，所以我直接就安裝到了根目錄下了。
配置映象
因為Flutter在執行的時候，就需要去官網下載一些需要的資源，但是因為天國特色的wall的原因，我們就需要映象伺服器，這個在官網上面有寫的很明白，而且這是一個臨時的映象，後面還要以官網的映象地址為準。
我們跳轉到根目錄
cd ~
複製程式碼就能找到這個.bash_profile隱藏檔案，我們用vim開啟這個檔案
vim ~/.bash_profile
複製程式碼然後需要輸入就把A鍵按一下進入編輯模式，把下面三個環境變數配置進去
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xueliheng/flutter/bin:$PATH
複製程式碼注意下，第三個環境變數這裡/Users/xueliheng/是我的根目錄，然後/flutter/是我們剛剛解壓的的zip包裡面的flutter資料夾。上面兩個環境變數是兩個映象地址，上文中也有說過。
接著shift+：然後輸入wq儲存並退出vim。輸入如下命令：
source ~/.bash_profile
複製程式碼最後我們就可以驗證一下flutter環境有沒有配置成功了。輸入：
flutter -h
複製程式碼看到如下如的列印資訊就是配置成功了
4、配置Android Studio
如果沒有下載Android Studio的話，就去官網去下載一下。
我們用flutter doctor命令去檢查一下flutter的環境配置，我們可以看到如下列印
這裡的每個✗都是我們要去解決的問題。不過他有告訴你應該怎麼做。比如第一個提示：
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
複製程式碼這就是讓你去下載Android Studio。我們在下載完成之後，開啟AS讓他去下載一些應該下載的東西。 如果這裡有提示你
[✗] Android toolchain - develop for Android devices (Android SDK version 24.0.2)
✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
複製程式碼這就是在提示讓你去升級一下SDK，然後命令如下
"/Users/xueliheng/Library/Android/sdk/tools/bin/sdkmanager" "platforms;android-28" "build-tools;28.0.3"
複製程式碼注意一下，這個地方的升級是需要”科學上網“的，如果有的小夥伴沒有這個條件的話，我這邊百度雲上面給大家準備了一個連結，提取碼: e48c，大家可以下載下來。下載下來之後解壓到/Users/Library/Android/這個資料夾。把原先的SDK直接覆蓋就行了，就已經是最新的SDK了。
接下來我們配置一下安卓的環境變數，還是在根目錄下找到.bash_profile檔案，並在其中新增四個環境變數
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
複製程式碼分別是：
- 安卓sdk的路徑
- 安卓的模擬器路徑
- 安卓tools路徑
- 安卓平臺工具
接下來我們再用flutter doctor檢查的時候，顯示的資訊如下圖
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
複製程式碼這個就是缺少Flutter外掛的意思，那麼我們就去AS裡面去配置一下好了。開啟AS的Preferences，點選Plugins，在搜尋欄中輸入flutter，找到相應的外掛，然後Install。當跳出安裝Dart外掛的提示介面時，記得點選Yes進行安裝。安裝完畢之後restart IDE重啟AS。
重啟之後就能看到多了一個這個東西
我們再用flutter doctor檢測一下
現在終於ok了。我們看到[✓]Android Studio說明，安卓的環境基本上配置成功，接下來我們就配置一下安卓的模擬器就好了。
5、安卓模擬器配置
在AS中找到模擬器配置如下圖並選擇
接著就建立裝置，選擇裝置
選擇系統
最後點選下載就完成了。
6、配置iOS環境
我們配置完了安卓的環境，再來flutter doctor檢測一下。
情況是這樣的。目前1.5.4版本的Flutter需要匹配新版本的Xcode10.2.1。按照他提示的來試試，提示我Xcode版本太低了，需要升級Xcode
更新到最新的之後，繼續走下面的步驟依舊會報錯。那麼我們可以試試下面的這個辦法：
$ brew link pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
複製程式碼這些執行完之後執行一下flutter doctor
7、VSCode的使用
VSCode上面使用的話，就簡單多了，這裡我就簡答的贅述一下。
只需要將Dart和Flutter外掛都下載下來
然後command+shift+p輸入flutter，選擇Flutter：New Project
輸入要建立的專案的名稱和存放專案的地址。如果提示需要指明flutter的SDK的路徑，那就選擇根目錄那個經過解壓得來的flutter的資料夾就好了。 接下來是這樣一個介面
接下來我們選擇View->Start Debugging來執行專案。
當然這個過程需要你把Xcode的模擬器開啟。執行完之後就能看到這個介面，也就是你的第一個Flutter工程啦！
8、Hot reload的使用
我們開啟lib/main.dart檔案，然後在其中找到
You have pushed the button this many times:
複製程式碼並把這個改為
You have clicked the button this many times:
複製程式碼那麼我們就能看到介面上多了一個小閃電
我們現在如果command+s儲存一下更改的話，就能很快的在模擬器上面看到相應的更改，不需要再重新去編譯一邊。這一點簡直是太棒了！解決了iOS開發者一個大痛點啊！！！
結語
至此，flutter的環境搭建工作基本上就進行完畢了，整個過程大概耗時接近2個小時，這期間包括採坑、查資料、下載、科學上網...等等很蛋疼的事情。當然網速基本上是最大的障礙，浪費了很多的時間。所以也是需要一定的耐心來完成的。
後面的文章也會持續的更新，最近有點懈怠，OpenGL系列的文章有點拖更的節奏，這個後面會補起來。Flutter我也才剛剛接手，也是慢慢的來採坑，也會以此來記錄自己的學習經歷，也希望能多多跟大家交流。
再次我附上自己的郵箱coderspr1nghall@gmail.com歡迎討論交流。