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

CrazyCodeBoy發表於2019-04-14
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
      xcode-account
      任何Apple ID都支援開發和測試，但如果要將應用釋出到App Store則需要一個99美刀的開發者賬號。

  • 當你第一次attach真機裝置進行iOS開發時，需要同時信任你的Mac和該裝置上的開發證書。首次將iOS裝置連線到Mac時,請在對話方塊中選擇 Trust。

    trust-computer

然後，轉到iOS裝置上的設定應用程式，選擇 常規>裝置管理 並信任您的證書。

  • 如果Xcode中的自動簽名失敗，請驗證專案的 General > Identity > Bundle Identifier 值是否唯一。

5.通過flutter run執行啟動專案

$ flutter run
複製程式碼

Android開發環境設定&Flutter外掛安裝

安裝Android Studio

1.下載並安裝 Android 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-開發環境搭建》部分的課程。

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

參考

相關文章