Flutter入門之Mac最詳環境搭建

看到越來越多的同學準備入坑Flutter開發，而Flutter的環境搭建還是挺繁瑣的，官網和網上的一些文章寫的都不全。結合自己實際環境搭建中遇到的一些問題，同時整合了一些看到的文章，希望此文可以幫助準備學習Flutter的同學少踩坑，不要讓環境搭建就把大家擋在了Flutter的門外。

系統環境要求

• 作業系統: macOS (64-bit) 10.14以上（因為最新的Flutter SDK要求Xcode10.1以上，而Xcode10需要10.14以上的系統）

• 磁碟空間: 3GB (Flutter SDK 3GB左右，不包括Xcode或Android Studio的磁碟空間，ps：Xcode大概10G,一版建議Mac選擇Xcode)

• 軟體: 建議先安裝Xcode、 VsCode

• 工具: brew 是 Mac下的一個包管理工具，它在環境搭建中有著超級大的作用，所以沒有的同學先去安裝

Sept 1.下載Flutter SDK包

去官網下載Flutter SDK包，進入頁面後向下滑，看到如下圖所示的介面，點選按鈕，下載Flutter SDK。

Step 2.配置環境變數

壓縮包下載好以後，找個位置進行解壓。這個位置很重要，因為下面配置環境變數的時候要用到。比如你解壓到了根目錄下的Flutter資料夾.

開啟終端工具，開啟環境變數配置檔案，這裡使用vim，命令如下：

vim ~/.bash_profile
複製程式碼

在開啟的檔案裡增加一行程式碼，意思是配置flutter命令在任何地方都可以使用

export PATH=/你放Flutter SDK的絕對路徑/bin:$PATH
複製程式碼

配置完成後，需要用source命令重新載入一下環境變數檔案 ，具體命令如下：

source ~/.bash_profile
複製程式碼

完成這步以後，就算我們flutter SDK的安裝工作完成了。可以使用下面命令來檢測一下，是否安裝成功了。

flutter –h
複製程式碼

出現下面的結果，說明到目前為止，我們安裝一切順利

Step 3.檢測Flutter執行環境，安裝相關依賴

接下來用flutter自帶命令檢測一下flutter的執行環境

flutter doctor
複製程式碼

按照檢測結果的說明，如果有[!] ✗ 標誌，表示本行檢測不通過，需要做一些設定或者安裝一些軟體。我這裡Mac的執行環境已經配置完成，不準備配置Android的開發環境，所以Android的警報忽略。

初次執行flutter doctor的時候可能會報一些環境錯誤

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        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 CocoaPod plugins will not work on iOS.For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.
複製程式碼

看到這個，不要慌，先保證brew安裝好，然後按照提示，安裝相關依賴軟體就行。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
複製程式碼

安裝pod setup速度奇慢，國內大佬們摸索出一種取巧的方法，具體步驟如下：

1. 到 github.com/CocoaPods/S… 網址把檔案clone下來，預設資料夾名字為Specs-master

2. 前往資料夾 ~/.cocoapods/repos(用 commad+shift+. 快捷鍵可以現實隱藏檔案)

3. 終端cd到你的工程目錄中執行 pod setup，等待一會，等到開始下載的時候，會發現在~/.cocoapods/repos 下面多一個master檔案，這時，需要複製master下面的.git 資料夾到Specs-master下面，同時停止pod setup

4. Specs-master資料夾名字修改為master，並替換~/.cocoapods/repos 下的master資料夾

還有一種更簡單的方法，如果有同事已經配好了flutter環境，直接將他的~/.cocoapods/repos/master資料夾拷貝一份，替換自己本地的就行。

常見問題總彙:

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。
複製程式碼

Step 4.更新環境變數

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時映象，大家可以將如下環境變數加入到使用者環境變數中，新增方法第二步一樣。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

至此，Flutter執行環境搭建搭建完成，我們可以在Mac上寫Flutter應用，安卓的環境如果有需要，我會再寫一篇安卓環境搭建。

Step 5.執行第一個Flutter應用

建立一個Flutter專案的資料夾，在資料夾下執行

flutter create xxx
複製程式碼

這裡需要注意的是，建立的應用名不能採用駝峰命名法，同時有可能會出現flutter命令識別的情況，再執行一下 source ~/.bash_profile 命令就可以使用flutter命令了建立一個flutter應用，建立完成後目錄結構如圖所示：

開啟模擬器，Mac下可以使用open -a Simulator開啟模擬器，然後進入flutter目錄裡執行flutter run命令，如圖所示:

等待幾分鐘，就可以在模擬器上看的你自己第一個flutter應用的介面，官方提供的一個計數器示例。主程式碼在lib/main.dart檔案裡，修改程式碼，按R就可以更新到介面上，除錯是不是很方便。

現在你已經可以自己寫自己的flutter應用了，在Flutter的世界中遨遊吧！