Mac版最詳細的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官網下載地址點擊進入
• 在國內由於中所周知的緣由，要想正常獲取安裝包列表或下載安裝包，可能須要FQ，你們也能夠去Flutter github項目下去下載安裝包，轉到下載頁
• 懶癌患者能夠直接點擊本連接下載，隨着版本的升級此連接可能會失效：點擊直接下載

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

• 若是已經安裝瞭解壓軟件能夠直接解壓
• 或者在命令行使用unzip進行解壓
  • 例如：

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

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

配置環境變量和鏡像

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

如何更改環境變量？

1. 使用快捷鍵Command+R（或者Windows鍵+R），或者直接點擊Launchpad,進入Launchpad，點擊其餘這個工具集合，選擇終端（或者terminal），進入命令行工具。

2. 輸入：echo $PATH，按回車執行命令查看當前變量值。

3. 輸入：sudo vi ~/.bash_profile，按回車輸入密碼後用vi打開用戶目錄下的bash_profile文件。必定要用sudo，不然沒權限保存文件。

4. 按i鍵，在空白處開始編輯

    

5. 將如下代碼添加進去

   • 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」，千萬別順手全粘貼上去，考試連姓名都抄的同窗不是一個合格的學渣。

6. 運行 source ~/.bash_profile或重啓命令行刷新當前終端窗口。

7. 運行 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

 

 

平臺設置

macOS支持爲iOS和Android開發Flutter應用程序。如今完成兩個平臺設置步驟中的至少一個，以便可以構建並運行你的第一個Flutter應用程序

iOS 設置 點擊前往教程

Android 設置 點擊前往教程

至此，所有環境搭建步驟結束，不敢保證所有正確，但我儘量的把個人安裝過程和問題都列了出來，但願能夠幫到各位同窗，祝你們起跑順利，若果安裝過程當中有任何問題，你們能夠評論或在個人公衆號前端小苑留言，看到後我會第一時間回覆。

最後歡迎你們關注公衆號前端小苑，我會按期在這裏發表原創文章。