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

Lab
1

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

  • 系統要求
  • 設置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 Download Android Studio & App Tools - Android Developers
• Try re-installing or updating your Android SDK,
visit Install | Flutter 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官方有比較詳細的說明文檔，大家可以根據需要進行查閱；

大家在安裝過程中遇到問題無法解決的，可以在我們課程的問答區提問進行提問；

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-開發環境搭建》部分的課程。

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

參考

CATALOG