Mac版最詳細的Flutter開發環境搭建

本文轉載自查看原文 2019-06-18 10:23 973 flutter

上周任務不多，閑來無事想學習一下flutter耍一耍，發現flutter的環境搭建步驟還是很繁瑣的，官網的搭建教程只是按步驟讓你進行操作，中間出現的問題完全沒有提及，對我這種沒搞過原生開發的小白來說超級不友好。而網上很多相關博客教程，感覺不夠詳細，許多環境搭建過程中的坑確實是提到了，但解決的辦法寫的比較籠統，在此我將本次環境搭建鎖遇到的各種奇奇怪怪的問題一一匯總，爭取結合各路大神的博客加上自己實際遇到的問題整理出一篇超級實用且詳細的教程，讓童鞋們在學習flutter的路上少走彎路，讓你的起跑順暢起來，大神們請指正或忽略。

系統環境要求

Flutter是相對新出的框架，對系統有一定的要求。

操作系統: macOS (64-bit)
磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間，ps：Xcode大概6個G,學習的情況下可以2選一）
軟件 Xcode、Android studio、VsCode
工具: Flutter 依賴下面這些命令行工具：
- bash, mkdir, rm, git, curl, unzip, which
- brew 是 Mac 下的一個包管理工具，類似於 centos 下的 yum，可以很方便地進行安裝/卸載/更新各種軟件包，例如：nodejs, elasticsearch, kibana, mysql, mongodb 等等，可以用來快速搭建各種本地環境，程序員必備工具，很多Mac都沒有安裝brew，但它在環境搭建中有着超級大的作用，所以沒有的童鞋先去安裝brew，教程：學習安裝brew

下載Flutter SDK

兩種方式：官網下載和github下載

flutter官網下載地址點擊進入
在國內因為中所周知的原因，要想正常獲取安裝包列表或下載安裝包，可能需要翻牆，大家也可以去Flutter github項目下去下載安裝包，轉到下載頁
懶癌患者可以直接點擊本鏈接下載，隨着版本的升級此鏈接可能會失效：點擊直接下載

將下載好的sdk保存后解壓。

如果已經安裝了解壓軟件可以直接解壓

或者在命令行使用unzip進行解壓

例如：

 cd ~/development unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

記住解壓后的文件路徑，接下來要用到。

配置環境變量和鏡像

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，可以將如下環境變量加入到用戶環境變量中。

如何更改環境變量？

使用快捷鍵Command+R（或者Windows鍵+R），或者直接點擊Launchpad,進入Launchpad，點擊其他這個工具集合，選擇終端（或者terminal），進入命令行工具。
輸入：echo $PATH，按回車執行命令查看當前變量值。
輸入：sudo vi ~/.bash_profile，按回車輸入密碼后用vi打開用戶目錄下的bash_profile文件。一定要用sudo，否則沒權限保存文件。
按i鍵，在空白處開始編輯
將以下代碼添加進去
- Flutter臨時鏡像
```
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
```
- 更新flutter的PATH變量，以便可以運行flutter命令在任何終端會話中。
```
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 
```
注意!!!：PATH_TO_FLUTTER_GIT_DIRECTORY 為你解壓過的flutter文件路徑，上一步提到過，比如“~/document/code”，千萬別順手全粘貼上去，考試連姓名都抄的同學不是一個合格的學渣。
運行 source ~/.bash_profile或重啟命令行刷新當前終端窗口。
運行 echo $PATH驗證目錄是否在已經在PATH中,正確的輸出如下，每個電腦輸出可能不一樣，但當你看到flutter路徑出現即說明配置成功。

/mySpace/flutterSDK/flutter/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/mongodb:/usr/local/go/bin~

檢查開發環境

到此我們已經安裝完flutter了，但此時還不具備開發的能力，flutter運行需要很多插件，運行以下命令查看是否需要安裝其它依賴項來完成安裝：

flutter doctor

這時候它會將你未安裝的依賴一一列出，每個電腦缺少的依賴都不盡相同，例如下面這樣：

✗ Android toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.dev/setup/#android-setup for detailed instructions. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup

先搞定需要brew安裝的，如果你英文好，按着提示一條一條的安裝，如果英文不好的話，那你可以找關鍵詞，比如上面的輸出，可以從中找到 brew install字眼，將所有需要brew安裝的統統安裝上即可。還是以上面為例,可以看到brew相關的有：

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods

執行上面命令逐條安裝依賴。再次運行flutter doctor，這個時候需要安裝的一些插件錯誤已經不會報了，但還是會有些其它的常見問題將會在下面一一列舉出來。

常見問題匯總

Cocoapods is installed but not initializedCocoapods已經安裝但沒有初始化，執行下面語句完成初始化（可能較慢，耐心等待）：
```
pod setup
```

 ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

提示xcode安裝不完整需要完整安裝，運行以下命令然后輸入root密碼便可：

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

執行brew install --HEAD libimobiledevice命令會拋出如下異常：

  configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:

  Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10 Consider adjusting the PKG_CONFIG_PATH environment variable if you installed software in a non-standard prefix. Alternatively, you may set the environment variables libusbmuxd_CFLAGS and libusbmuxd_LIBS to avoid the need to call pkg-config. See the pkg-config man page for more details. READ THIS: https://docs.brew.sh/Troubleshooting

這時候需要運行brew unlink usbmuxd & brew install --HEAD usbmuxd而不是libusbmuxd。

flutter doctor沒有檢測到Android SDK, 安裝sdk即可，如何安裝？
- 先下載android sdk for mac 給二個靠譜的網址：
  
  a. http://down.tech.sina.com.cn/page/45703.html
  
  b. http://mac.softpedia.com/get/Developer-Tools/Google-Android-SDK.shtml
  
  到這個面下載后，解壓到某個目錄
- 設置下載的代理服務器
  - 命令行進入tools目錄
  - 然后輸入 ./android sdk 請出SDK Manager的圖形界面
  - Android SDK Manager -> Preferences...
  - http proxy server這里填寫： mirrors.neusoft.edu.cn （感謝東軟搭建國內的鏡像服務器，為廣大程序員造福無數）
  - 端口填寫80，然后把Force https:// 前的勾勾上
- mac頂部菜單Tools->Manage Add-on Site
- 把下面這堆網址全手動New加進去，然后就可以下載了(注：上圖中加圈的項，建議勾上，否則有可能創建不了Android模擬設備)：
```
  http://mirrors.neusoft.edu.cn/android/repository/addon-6.xml 
  http://mirrors.neusoft.edu.cn/android/repository/addon.xml 
  http://mirrors.neusoft.edu.cn/android/repository/extras/intel/addon.xml 
  http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-tv/sys-img.xml 
  http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-wear/sys-img.xml 
  http://mirrors.neusoft.edu.cn/android/repository/sys-img/android/sys-img.xml 
  http://mirrors.neusoft.edu.cn/android/repository/sys-img/google_apis/sys-img.xml 
  http://mirrors.neusoft.edu.cn/android/repository/sys-img/x86/addon-x86.xml 
  http://mirrors.neusoft.edu.cn/android/repository/addons_list-2.xml 
  http://mirrors.neusoft.edu.cn/android/repository/repository-10.xml
```