上週任務不多，閒來無事想學習一下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 設定 點選前往教程

至此，全部環境搭建步驟結束，不敢保證全部正確，但我儘可能的把我的安裝過程和問題都列了出來，希望可以幫到各位同學，祝大家起跑順利，若果安裝過程中有任何問題，大家可以評論或在我的公眾號前端小苑留言，看到後我會第一時間回覆。

最後歡迎大家關注公眾號前端小苑，我會定期在這裡發表原創文章。

 

相關推薦