前言
最近Flutter已經(jīng)瘋狂的刷屏了各個技術(shù)博客、技術(shù)網(wǎng)站，完全有一統(tǒng)天下的氣勢。所以最近也決定開始嘗嘗鮮，從零開始一步步的來探索Flutter的世界。就從環(huán)境搭建開始，記錄一下自己探索Flutter的過程。
安裝Flutter
首先我們可以在Flutter官網(wǎng)上面看到一些配置環(huán)境的步驟。這里就直接開干了，走起。
1、配置HomeBrew
我們在去配置Flutter的環(huán)境之前，需要先檢查一下HomeBrew是不是最新的。
$ brew update
如果沒有brew的話，可以去HomeBrew官網(wǎng)自行下載。這里就不贅述了，這里如果重新下載的話，看到下面的打印信息就說明下載完畢了。
2、下載SDK
接下來就是去官網(wǎng)下載SDK了。注意，這里下載SDK有兩種方法，一是直接git clone -b beta https://github.com/flutter/flutter.git下載，二是自己在官網(wǎng)下載下來，如下圖
這里我兩種方法都試過了一遍，第一種方法實在是太慢了，在經(jīng)歷了耗費一個半小時下載到94%，最后提示失敗了的過程之后，我決定還是用第二種方法，整個過程只用了3分鐘的樣子，相當(dāng)滿意。下載完之后，是一個名字叫flutter_macos_v1.5.4-hotfix.2-stable.zip的壓縮包。
然后我們解壓這個zip包，把解壓出來的flutter文件放到根目錄下即可。
3、配置環(huán)境變量
因為Flutter的SDK中包含了很多的命令行工具。我們就需要配置環(huán)境變量，所以我直接就安裝到了根目錄下了。
配置鏡像
因為Flutter在運行的時候，就需要去官網(wǎng)下載一些需要的資源，但是因為天國特色的wall的原因，我們就需要鏡像服務(wù)器，這個在官網(wǎng)上面有寫的很明白，而且這是一個臨時的鏡像，后面還要以官網(wǎng)的鏡像地址為準。
我們跳轉(zhuǎn)到根目錄
cd ~
就能找到這個.bash_profile隱藏文件，我們用vim打開這個文件
vim ~/.bash_profile
然后需要輸入就把A鍵按一下進入編輯模式，把下面三個環(huán)境變量配置進去
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
注意下，第三個環(huán)境變量這里/Users/xueliheng/是我的根目錄，然后/flutter/是我們剛剛解壓的的zip包里面的flutter文件夾。上面兩個環(huán)境變量是兩個鏡像地址，上文中也有說過。
接著shift+：然后輸入wq保存并退出vim。輸入如下命令：
source ~/.bash_profile
最后我們就可以驗證一下flutter環(huán)境有沒有配置成功了。輸入：
flutter -h
看到如下如的打印信息就是配置成功了
4、配置Android Studio
如果沒有下載Android Studio的話，就去官網(wǎng)去下載一下。
我們用flutter doctor命令去檢查一下flutter的環(huán)境配置，我們可以看到如下打印
這里的每個?都是我們要去解決的問題。不過他有告訴你應(yīng)該怎么做。比如第一個提示：
[?] Android toolchain - develop for Android devices
? Unable to locate Android SDK.
這就是讓你去下載Android Studio。我們在下載完成之后，打開AS讓他去下載一些應(yīng)該下載的東西。
如果這里有提示你
[?] 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"
注意一下，這個地方的升級是需要”科學(xué)上網(wǎng)“的，如果有的小伙伴沒有這個條件的話，我這邊百度云上面給大家準備了一個鏈接，提取碼: e48c，大家可以下載下來。下載下來之后解壓到/Users/Library/Android/這個文件夾。把原先的SDK直接覆蓋就行了，就已經(jīng)是最新的SDK了。
接下來我們配置一下安卓的環(huán)境變量，還是在根目錄下找到.bash_profile文件，并在其中添加四個環(huán)境變量
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檢查的時候，顯示的信息如下圖
意思就是讓我們?nèi)ハ螺diOS的相關(guān)環(huán)境，我們先暫時放放，下面還有一個關(guān)于Android Studio的沒有解決完
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
這個就是缺少Flutter插件的意思，那么我們就去AS里面去配置一下好了。打開AS的Preferences，點擊Plugins，在搜索欄中輸入flutter，找到相應(yīng)的插件，然后Install。當(dāng)跳出安裝Dart插件的提示界面時，記得點擊Yes進行安裝。安裝完畢之后restart IDE重啟AS。
重啟之后就能看到多了一個這個東西
我們再用flutter doctor檢測一下
現(xiàn)在終于ok了。我們看到[?]Android Studio說明，安卓的環(huán)境基本上配置成功，接下來我們就配置一下安卓的模擬器就好了。
5、安卓模擬器配置
在AS中找到模擬器配置如下圖并選擇
接著就創(chuàng)建設(shè)備，選擇設(shè)備
選擇系統(tǒng)
最后點擊下載就完成了。
6、配置iOS環(huán)境
我們配置完了安卓的環(huán)境，再來flutter doctor檢測一下。
情況是這樣的。目前1.5.4版本的Flutter需要匹配新版本的Xcode10.2.1。按照他提示的來試試，提示我Xcode版本太低了，需要升級Xcode
更新到最新的之后，繼續(xù)走下面的步驟依舊會報錯。那么我們可以試試下面的這個辦法：
$ brew link pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
這些執(zhí)行完之后執(zhí)行一下flutter doctor
最后還真是沒錯，全部配置完成了！那么我們就把iOS的也配置完畢了。
7、VSCode的使用
VSCode上面使用的話，就簡單多了，這里我就簡答的贅述一下。
只需要將Dart和Flutter插件都下載下來
然后command+shift+p輸入flutter，選擇Flutter：New Project
輸入要創(chuàng)建的項目的名稱和存放項目的地址。如果提示需要指明flutter的SDK的路徑，那就選擇根目錄那個經(jīng)過解壓得來的flutter的文件夾就好了。
接下來是這樣一個界面
接下來我們選擇View->Start Debugging來運行項目。
當(dāng)然這個過程需要你把Xcode的模擬器打開。運行完之后就能看到這個界面，也就是你的第一個Flutter工程啦！
8、Hot reload的使用
我們打開lib/main.dart文件，然后在其中找到
You have pushed the button this many times:
并把這個改為
You have clicked the button this many times:
那么我們就能看到界面上多了一個小閃電
我們現(xiàn)在如果command+s保存一下更改的話，就能很快的在模擬器上面看到相應(yīng)的更改，不需要再重新去編譯一邊。這一點簡直是太棒了！解決了iOS開發(fā)者一個大痛點?。。?！
結(jié)語
至此，flutter的環(huán)境搭建工作基本上就進行完畢了，整個過程大概耗時接近2個小時，這期間包括采坑、查資料、下載、科學(xué)上網(wǎng)...等等很蛋疼的事情。當(dāng)然網(wǎng)速基本上是最大的障礙，浪費了很多的時間。所以也是需要一定的耐心來完成的。
后面的文章也會持續(xù)的更新，最近有點懈怠，OpenGL系列的文章有點拖更的節(jié)奏，這個后面會補起來。Flutter我也才剛剛接手，也是慢慢的來采坑，也會以此來記錄自己的學(xué)習(xí)經(jīng)歷，也希望能多多跟大家交流。
再次我附上自己的郵箱coderspr1nghall@gmail.com歡迎討論交流。
