兩分鐘帶你快速搭建Flutter開發環境(Mac)

爲你們傾力打造的課程《Flutter從入門到進階-實戰攜程網App》上線了，解鎖Flutter開發新姿式，一網打盡Flutter核心技術 點我Get！！！

在這篇文章中，將帶着你們一塊兒在Mac平臺上快速搭建Flutter的開發環境，同時會將搭建Flutter開發環境中的一些技巧和經驗分享給你們。

• 在你們Flutter開發環境過程當中遇到沒法解決的問題能夠在課程問答區進行提問，課程老師會對你進行輔導和幫助；

目錄

---

• 系統要求
• 設置FLutter鏡像(非必須)
• 獲取Flutter SDK
• iOS開發環境設置
• Android開發環境設置
• 安裝Flutter插件

系統要求

在Mac上要安裝並運行Flutter要知足如下最低要求:

• 操做系統: macOS (64-bit)
• 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.
• 工具: Flutter 依賴下面這些命令行工具：bash curl git 2.x mkdir rm unzip which

設置FLutter鏡像(非必須)

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

//Macintosh HD⁩  ⁨Users⁩  ⁨你的用戶名  ⁨.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

注意：此鏡像爲臨時鏡像，並不能保證一直可用，你們能夠從 Using Flutter in China 上得到有關鏡像服務器的最新動態。

獲取Flutter SDK

1.點Flutter官網下載其最新可用的安裝包。

2.解壓安裝包到你想安裝的目錄，如：

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
複製代碼

3.添加flutter相關工具到path中：

export PATH="$PATH:`pwd`/flutter/bin"
複製代碼

此代碼只能暫時針對當前命令行窗口設置PATH環境變量，要想永久將Flutter添加到PATH中請參考下面作法：

$ cd ~
$ vim .bash_profile
複製代碼

而後添加：

export PATH=/Users/jph/Documents/flutter/bin:$PATH
複製代碼

以後記得保存文件。

運行 flutter doctor

上面path配置完成以後，須要關閉終端從新打開，而後運行：

$ flutter doctor
複製代碼

該命令檢查你的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能須要安裝的其餘軟件或進一步須要執行的任務（以粗體顯示）：

例如：

[-] 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.
複製代碼

通常的錯誤會是XCode或Android Studio版本過低、或者沒有ANDROID_HOME環境變量等，可參考一下環境變量的配置來檢查你的環境變量：

//Macintosh HD⁩  ⁨Users⁩  ⁨你的用戶名  ⁨.bash_profile
#Android 環境變量
export ANDROID_HOME=/Users/你的用戶名/Library/Android/sdk
#Android 模擬器路徑
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools 路徑
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平臺工具路徑
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
#Android NDK路徑
ANDROID_NDK_HOME=/Users/你的用戶名/Library/Android/ndk/android-ndk-r10e
#FLutter鏡像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#Flutter環境變量
export PATH=/Users/jph/Documents/flutter/bin:$PATH
複製代碼

第一次運行一個flutter命令（如flutter doctor）時，它會下載它本身的依賴項並自行編譯。之後再運行就會快得多。

iOS開發環境設置

安裝 Xcode

要用Flutter開發iOS App須要Xcode 9.0 或更高版本:

1.安裝Xcode 9.0或更新版本(經過連接下載或蘋果應用商店)

2.配置Xcode命令行工具以使用新安裝的Xcode版本 s

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
複製代碼

以上路徑時對於最新版Xcode的路徑。若是你須要使用不一樣的Xcode版本，須要指定相應路徑。

3.確保Xcode許可協議是經過打開一次Xcode或經過命令sudo xcodebuild -license贊成過了

接下來就可使用Xcode，在iOS設備或模擬器上運行Flutter App了。

設置iOS模擬器

要準備在iOS模擬器上運行並測試您的Flutter應用，請按如下步驟操做：

1.在終端輸入以下命令打開一個iOS模擬器：

$ open -a Simulator
複製代碼

2.經過模擬器菜單欄的 硬件>設備 ，確保你打開是64位 iPhone 5s或更新的模擬器

3.若是模擬器過大，能夠經過模擬器的 Window> Scale 菜單下設置設備比例

建立和運行一個簡單的Flutter項目

1.經過以下命令建立一個Flutter項目

$ flutter create my_app
複製代碼

2.命令運行完成以後會在當前目錄下建立一個名爲my_app的Flutter項目，而後經過一下命令能夠運行它：

$ cd my_app
$ flutter run
複製代碼

如何將Flutter安裝到iOS真機上？

要經過lutter run將Flutter應用安裝到iOS真機設備，須要一些額外的工具和一個Apple賬戶，還須要在Xcode中進行設置：

固然，用XCode來將Flutter運行在真機上更簡單，只須要點一下run按鈕便可，能夠根據須要進行選擇這兩種不一樣的運行方式；

1.安裝 Homebrew （若是已經安裝了brew,跳過此步驟）.

2.確保homebrew已更新

$ brew update
複製代碼

3.打開終端並運行這些命令來安裝用於將Flutter應用安裝到iOS設備的工具

$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup
複製代碼

若是這些命令中的任何一個失敗並出現錯誤，可運行brew doctor並按照說明解決問題。

4.遵循Xcode簽名流程來配置您的項目:

• 在你Flutter項目目錄中經過 open ios/Runner.xcworkspace 打開默認的Xcode workspace

• 在Xcode中，選擇導航面板左側中的Runner項目

• 在Runner target設置頁面中，確保在 常規>簽名>團隊 下選擇了您的開發團隊。當您選擇一個團隊時，Xcode會建立並下載開發證書，向您的設備註冊您的賬戶，並建立和下載配置文件（若是須要）

  • 要開始您的第一個iOS開發項目，您可能須要使用您的Apple ID登陸Xcode

    

    任何Apple ID都支持開發和測試，但若是要將應用發佈到App Store則須要一個99美刀的開發者帳號。

• 當你第一次attach真機設備進行iOS開發時，須要同時信任你的Mac和該設備上的開發證書。首次將iOS設備鏈接到Mac時,請在對話框中選擇 Trust。

  

而後，轉到iOS設備上的設置應用程序，選擇 常規>設備管理 並信任您的證書。

• 若是Xcode中的自動簽名失敗，請驗證項目的 General > Identity > Bundle Identifier 值是否惟一。

5.經過flutter run運行啓動項目

$ flutter run
複製代碼

Android開發環境設置&Flutter插件安裝

安裝Android Studio

1.下載並安裝 Android Studio

• developer.android.com/studio
• developer.android.google.cn/studio

由於Android網站設在國外，若是你的網絡沒法訪問第一個地址，能夠選擇使用Google爲中國開發者提供的中國網址進行訪問。

另外，關於Android Studio的安裝和配置，Android官方有比較詳細的說明文檔developer.android.google.cn/studio/intr…，你們能夠根據須要進行查閱；

你們在安裝過程當中遇到問題沒法解決的，能夠在咱們課程的問答區提問進行提問；

2.啓動Android Studio，而後執行「Android Studio安裝嚮導」。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具

Flutter插件安裝

• 打開Android Studio
• 打開Preferences > Plugins (macOS), File > Settings > Plugins (Windows & Linux)
• 選擇 Browse repositories, 搜索 Flutter plugin
• 而後點擊安裝，而後安裝Dart插件
• 完成以後選擇重啓Android Studio

如何在Android模擬器上運行Flutter？

要準備在Android模擬器上運行並測試您的Flutter應用，須要按照如下步驟操做：

• 在你的機器上啓用 VM acceleration；

• 啓動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device；

• 選擇一個設備並選擇 Next；

• 爲要模擬的Android版本選擇一個或多個系統映像，而後選擇 Next. 建議使用 x86 或 x86_64 的鏡像；

• 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啓用硬件加速；

• 驗證AVD配置是否正確，而後選擇 Finish；

  若是對以上步驟還有不清楚的能夠參閱Android官方的 Managing AVDs文檔。

  你們在安裝過程當中遇到問題沒法解決的，能夠在咱們課程的問答區提問進行提問；

• 在 Android Virtual Device Manager中, 點擊工具欄的 Run，模擬器啓動並顯示所選操做系統版本或設備的啓動畫面；
• 經過flutter run運行啓動項目；

如何在Android真機運行？

要準備在Android設備上運行並測試您的Flutter應用，您須要安裝Android 4.1（API level 16）或更高版本的Android設備

• 在你的設備上啓用 開發人員選項 和 USB調試 。詳細說明可在Android文檔中找到；
• 使用USB將手機插入電腦，若是有受權提示須要贊成受權；
• 在終端中，運行flutter devices 命令以驗證Flutter是否識別你鏈接的Android設備；
• 經過flutter run運行啓動項目；

默認狀況下，Flutter使用的Android SDK版本是基於你的 adb 工具版本， 若是你想讓Flutter使用不一樣版本的Android SDK，則必須將該 ANDROID_HOME 環境變量修改SDK的目錄。

關於開發環境搭建更多實戰技巧與最佳實踐可學習《基於Flutter1.x開發攜程網App-開發環境搭建》部分的課程。

• 本節學習過程當中遇到沒法解決的問題能夠在課程問答區進行提問，課程老師會對你進行輔導和幫助；

參考

• Flutter從入門到進階實戰攜程網App