背景
前兩天在安裝flutter的開發(fā)環(huán)境纸俭，搞了挺久吧趣，踩了一些坑和悦，所以寫出來做個總結仁热，希望有意愿學習flutter的小伙伴們在配置開發(fā)環(huán)境的時候能更順利一點榜揖。這里先列出我遇到的幾個坑，若你在安裝過程中也遇到了抗蠢，可以往下看举哟，后文會一一給出解決辦法：
- APP Store無法下載Xcode
- pod setup巨慢且失敗
- flutter run安卓平臺時，遭遇Initializing gradle巨慢且失敗
- brew update巨慢（但一般只是慢迅矛，能成功）
Flutter的簡單介紹
當下妨猩，一般企業(yè)想開發(fā)一個移動端應用時，必須招聘兩撥人馬（IOS開發(fā)秽褒、Android開發(fā)）壶硅，做兩套開發(fā)，兼容兩個系統销斟，成本可想而知會有多高庐椒。所以業(yè)界也在尋求一套盡量完善的跨平臺方案能兼容兩個系統。目前主流的跨平臺方案主要是兩種：
- 基于瀏覽器技術的Hybrid蚂踊；
- 基于橋接Native組件约谈，如RN、WEEX
當然，這兩種方案開發(fā)出的應用在使用體驗上還遠遠達不到Native的水平窗宇。而Flutter是基于底層統一渲染的措伐，能得到高度一致的跨端效果，其使用體驗直逼Native（網上都這么說军俊，對此本人持保留態(tài)度）侥加。和RN、Weex不同的是粪躬，Flutter并不屬于JS生態(tài)的一個分支担败，它采用的是Dart語言。所以要做Flutter開發(fā)镰官，你還需要學會Dart提前，當然，在初體驗了Dart之后泳唠，發(fā)現其語法還是很簡單的狈网，像Java又像JS，所以笨腥，擁有JS或Java編程能力的話學習Dart應該會比較輕松拓哺。
Flutter安裝（MacOS版）
注：這篇博文會針對安裝過程中遇到的坑做特別說明，安裝過程也可參考Flutter官網脖母。
一士鸥、系統要求
- 操作系統: macOS (64-bit)
- 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）
- 工具: Flutter 依賴這些命令行工具：bash, mkdir, rm, git, curl, unzip, which
二、獲取Flutter SDK
進入Flutter下載渠道：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos下載你所想要安裝的版本（本人下載的v1.5.1_dev）
解壓安裝包至你想要安裝的目錄
添加環(huán)境變量谆级，終端進入你的Flutter安裝目錄,輸入
pwd以獲取安裝路徑烤礁，繼續(xù)輸入vi ~/.bash_profile，在vim中添加以下文本肥照，{pwd}用你的安裝路徑替代：
export PATH={pwd}/flutter/bin:$PATH
- 由于國內墻的限制脚仔，訪問Flutter會有問題，請使用Flutter官方為中國特地搭建的鏡像源建峭，請在上述vim編輯器中繼續(xù)添加：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
此時~/.bash_profile中的配置如下：
三玻侥、 終端保存后退出，執(zhí)行flutter doctor命令
如上圖亿蒸，flutter會檢查你的配置是否齊全，針對flutter doctor拋出的問題掌桩，我們一個一個解決边锁。
[!] Android toolchain - develop for Android devices
? ...
? ...
1.根據提示下載Android Studio并安裝
下載地址：https://developer.android.com/studio/index.html。
[!] iOS toolchain - develop for iOS devices
? ...
? ...
2. 下載并安裝xcode波岛，版本要求為v7.2或以上
由于官網安裝教程中給出的鏈接地址是xcode的最新版本茅坛，需要對應新的系統版本，否則不能下載，建議去Apple Developer下載指定版本xcode
溫馨提示：xcode體積較大贡蓖，一般在5.6G左右曹鸠，請保證網絡順暢。
3. 安裝libimobiledevice和ideviceinstaller
根據flutter doctor提示依次執(zhí)行
brew update
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
注意斥铺，brew update會非常慢彻桃，請耐心等待，也可以選擇替換Homebrew鏡像源晾蜘，
這是清華大學提供的鏡像：https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/
4. 安裝ios-deploy邻眷，執(zhí)行brew install ios-deploy
5. 安裝CocoaPods
執(zhí)行brew install cocoapods，安裝完成后執(zhí)行pod setup剔交。
注意肆饶，pod setup會很慢，并且一段時間后提示失敗岖常，即使翻墻了也不行驯镊。所以我們需要手動安裝，步驟如下：
- 5.1 進入CocoaPods的git地址下載或clone竭鞍，若是下載的壓縮文件板惑，請解壓，默認的下載目錄名為Specs-master
- 5.2 終端執(zhí)行
cd ~/.cocoapods/repos進入cocoapods目錄 - 5.3 另開一個終端笼蛛，cd到你的工程目錄洒放，執(zhí)行
pod setup，此時~/.cocoapods/repos目錄下會產生一個master目錄 - 5.4 Specs-master目錄名字修改為master滨砍，并使用cp命令替換~/.cocoapods/repos下的master目錄
終端再執(zhí)行flutter doctor往湿，發(fā)現關于ios的報錯信息已解決
四. 配置IOS和Android模擬器
-
IOS
xcode安裝成功后，在終端輸入open -a Simulator便可打開模擬器惋戏，如圖所示為IOS模擬器截圖：
image.png Android
2.1 Android Studio安裝成功后啟動應用
2.2 點擊Configure -> AVD Manager -> Create Virtual Device
2.3 選擇一項設備后點Next
2.4 為要模擬的Android版本選擇一個或多個系統映像并執(zhí)行download领追，下載成 功后選擇 Next.
2.5 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用硬件加速, 完成后點finish，模擬器安裝完成
2.6 完成后測試模擬器是否正常响逢，雙擊模擬機列表中你安裝的設備绒窑，將彈出模擬器
五. 配置編輯器（VSCode）
- 啟動VSCode
- 調用 查看>命令面板
- 輸入
install, 然后選擇 Extensions: Install Extension - 在搜索框輸入
flutter, 在搜索結果列表中選擇 Flutter, 然后點擊 Install - 選擇 OK，重新啟動 VSCode
六. 創(chuàng)建Flutter工程并啟動IOS及Android模擬器
- 在VSCode的命令面板中輸入
flutter, 選擇 Flutter: New Project舔亭，輸入project name - VSCode會幫你創(chuàng)建一個Flutter項目的骨架些膨，調用 調試 -> 啟動調試
- 選擇你要調試的模擬器
- 在模擬器中進行調試砖瞧，其中這個骨架的主體業(yè)務代碼在
/lib/main.dart中
也可以在終端執(zhí)行
flutter run進行啟動黔漂，但是要確保VSCode右下角已選擇了一個模擬器設備
如下圖所示：
注：第一次啟動安卓模擬器時，會提示Initializing gradle...這個操作如果不進行翻墻冕杠，可能會失斆础（事實上洼哎，我翻了墻也是失敗的），下載會非常慢。如果你也遇到這個問題噩峦，請按照以下步驟進行配置鏡像：
-
進入你的工程目錄锭沟，打開/android/gradle/wrapper/gradle-wrapper.properties，查看
distributionUrl配置
image.png 手動下載對應的gradle（如上圖的話是gradle-4.10.2-all.zip）并解壓识补，下載地址：http://services.gradle.org/distributions/
打開Macintosh HD -> 用戶 -> 選擇自己的用戶名族淮，按
shift+command+.組合鍵顯示隱藏文件夾，進入.gradle目錄
注：如果你的Finder左側欄沒有Macintosh HD李请，可以點進下載瞧筛，然后按三次command + ??組合鍵，Finder就會進入Macintosh HD导盅，可以把Macintosh HD拉進左側欄中
-
進入.gradle -> wrapper -> dists较幌，可以看到這里有gradle-4.10.2-all目錄了，再進入會有一個挺長的類似hash值的一個目錄白翻，進入此目錄乍炉，將步驟2中解壓的目錄拷貝進來
image.png
- 設置Flutter SDK的鏡像
打開你的Flutter SDK的安裝目錄，進入flutter -> packages -> flutter_tools -> gradle滤馍，打開flutter.gradle文件岛琼，在buildscript > repositories對象下注釋掉google()和jcenter()，添加如下鏡像：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
如圖：
-
設置工程中的鏡像
打開你的工程目錄巢株，打開android/build.gradle文件槐瑞，如上個步驟，在buildscript > repositories和allprojects > repositories兩個對象下添加鏡像源阁苞，如圖：
image.png -
再次嘗試啟動調試困檩，成功！
image.png
七. Flutter初體驗
Flutter可以通過熱重載進行快速的代碼調試那槽，如果你做過webpack工程悼沿，它就和webpack的熱重載是一樣的。打開lib/main.dart骚灸，修改MyApp類下build方法的home page title糟趾，command + s進行保存后你發(fā)現了什么？無需重新構建甚牲，模擬器上立即出現了效果：
至此义郑，MacOS上的Flutter安裝和環(huán)境配置已經完成了，我們已經可以開發(fā)Flutter項目并在模擬機上進行調試了丈钙，如果想要在真機上調試魔慷，請參考Flutter官網。
PS. 如果你在安裝過程中遇到了更多的問題著恩，或者上述解決方案沒有成功，歡迎和我討論。
