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的世界中遨遊吧！