獲取Flutter SDK

1. 去flutter官網(wǎng)下載其最新可用的安裝包，轉(zhuǎn)到下載頁 。

   注意，F(xiàn)lutter的渠道版本會不停變動，請以Flutter官網(wǎng)為準。另外，在中國大陸地區(qū)，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項目下去下載安裝包，轉(zhuǎn)到下載頁 。

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

   cd ~/Users/nav/wanglh/flutteSdk
   unzip ~/Users/nav/wanglh/flutteSdk/flutter_macos_v1.9.1+hotfix.5-stable.zip
   

即將壓縮包解壓到flutteSdk目錄下。

image.png

更新環(huán)境變量

vim編輯bash_profile文件：

1. 確定您Flutter SDK的目錄，您將在步驟3中用到。
2. 打開(或創(chuàng)建) $HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不同.
3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆Flutter的git repo的路徑:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如我的目錄路徑是：“~/Users/nav/wanglh/flutteSdk/”

 export PATH=~/Users/nav/wanglh/flutteSdk/flutter/bin:$PATH

效果如下：

image.png

運行 flutter doctor

運行以下命令查看是否需要安裝其它依賴項來完成安裝：

flutter doctor

該命令檢查您的環(huán)境并在終端窗口中顯示報告。Dart SDK已經(jīng)在捆綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執(zhí)行的任務(wù)（以粗體顯示）

例如:

image.png

一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。下面貼一個筆者本機(mac)的環(huán)境變量配置，您可以對比修正：

  export PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換為你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項并自行編譯，比較慢，耐心等待。以后再運行就會快得多。

以下各部分介紹如何執(zhí)行這些任務(wù)并完成設(shè)置過程。你會看到在flutter doctor輸出中， 如果你選擇使用IDE，我們提供了，IntelliJ IDEA，Android Studio和VS Code的插件， 請參閱編輯器設(shè)置 以了解安裝Flutter和Dart插件的步驟。

一旦你安裝了任何缺失的依賴，再次運行flutter doctor命令來驗證你是否已經(jīng)正確地設(shè)置了。

檢查flutter配置是否成功

flutter -h

如果你能看到如下頁面，就代表成功了

image.png

image.png

平臺設(shè)置

macOS支持為iOS和Android開發(fā)Flutter應(yīng)用程序?，F(xiàn)在完成兩個平臺設(shè)置步驟中的至少一個，以便能夠構(gòu)建并運行您的第一個Flutter應(yīng)用程序

iOS 設(shè)置

安裝 Xcode

要為iOS開發(fā)Flutter應(yīng)用程序，您需要Xcode 7.2或更高版本:

1. 安裝Xcode 7.2或更新版本(通過鏈接下載或蘋果應(yīng)用商店).

2. 配置Xcode命令行工具以使用新安裝的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 對于大多數(shù)情況，當(dāng)您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應(yīng)路徑。

3. 確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令sudo xcodebuild -license同意過了.

使用Xcode，您可以在iOS設(shè)備或模擬器上運行Flutter應(yīng)用程序。

設(shè)置iOS模擬器

要準備在iOS模擬器上運行并測試您的Flutter應(yīng)用，請按以下步驟操作：

1. 在Mac上，通過Spotlight或使用以下命令找到模擬器:

   open -a Simulator
   
   

2. 通過檢查模擬器 硬件>設(shè)備 菜單中的設(shè)置，確保您的模擬器正在使用64位設(shè)備（iPhone 5s或更高版本）.

3. 根據(jù)您的開發(fā)機器的屏幕大小，模擬的高清屏iOS設(shè)備可能會使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設(shè)置設(shè)備比例

4. 運行 flutter run啟動您的應(yīng)用.

安裝到iOS設(shè)備

要將您的Flutter應(yīng)用安裝到iOS真機設(shè)備，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設(shè)置。

1. 安裝 homebrew （如果已經(jīng)安裝了brew,跳過此步驟）.

2. 打開終端并運行這些命令來安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具

   brew update
   brew install --HEAD libimobiledevice
   brew install ideviceinstaller ios-deploy cocoapods
   pod setup
   
   

如果這些命令中的任何一個失敗并出現(xiàn)錯誤，請運行brew doctor并按照說明解決問題.

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

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

   2. 在Xcode中，選擇導(dǎo)航面板左側(cè)中的Runner項目

   3. 在Runner target設(shè)置頁面中，確保在 常規(guī)>簽名>團隊 下選擇了您的開發(fā)團隊。當(dāng)您選擇一個團隊時，Xcode會創(chuàng)建并下載開發(fā)證書，向您的設(shè)備注冊您的帳戶，并創(chuàng)建和下載配置文件（如果需要）

      • 要開始您的第一個iOS開發(fā)項目，您可能需要使用您的Apple ID登錄Xcode.

        
        
        Xcode account add

        任何Apple ID都支持開發(fā)和測試。需要注冊Apple開發(fā)者計劃才能將您的應(yīng)用分發(fā)到App Store. 查看differences between Apple membership types.

      • 當(dāng)您第一次attach真機設(shè)備進行iOS開發(fā)時，您需要同時信任你的Mac和該設(shè)備上的開發(fā)證書。首次將iOS設(shè)備連接到Mac時,請在對話框中選擇 Trust。

        Trust Mac

        然后，轉(zhuǎn)到iOS設(shè)備上的設(shè)置應(yīng)用程序，選擇 常規(guī)>設(shè)備管理 并信任您的證書。

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

      Check the app's Bundle ID

2. 運行啟動您的應(yīng)用程序 flutter run.

Android設(shè)置

安裝Android Studio

要為Android開發(fā)Flutter應(yīng)用，您可以使用Mac，Windows或Linux（64位）機器.

Flutter需要安裝和配置Android Studio:

1. 下載并安裝 Android Studio.

2. 啟動Android Studio，然后執(zhí)行“Android Studio安裝向?qū)А薄＿@將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構(gòu)建工具，這是Flutter為Android開發(fā)時所必需的

設(shè)置您的Android設(shè)備

要準備在Android設(shè)備上運行并測試您的Flutter應(yīng)用，您需要安裝Android 4.1（API level 16）或更高版本的Android設(shè)備.

1. 在您的設(shè)備上啟用 開發(fā)人員選項 和 USB調(diào)試 。詳細說明可在Android文檔中找到。
2. 使用USB將手機插入電腦。如果您的設(shè)備出現(xiàn)提示，請授權(quán)您的計算機訪問您的設(shè)備。
3. 在終端中，運行 flutter devices 命令以驗證Flutter識別您連接的Android設(shè)備。
4. 運行啟動您的應(yīng)用程序 flutter run。

默認情況下，F(xiàn)lutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環(huán)境變量設(shè)置為SDK安裝目錄。

設(shè)置Android模擬器

要準備在Android模擬器上運行并測試您的Flutter應(yīng)用，請按照以下步驟操作：

1. 在您的機器上啟用 VM acceleration .

2. 啟動 Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device.

3. 選擇一個設(shè)備并選擇 Next。

4. 為要模擬的Android版本選擇一個或多個系統(tǒng)映像，然后選擇 Next. 建議使用 x86 或 x86_64 image .

5. 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬件加速.

6. 驗證AVD配置是否正確，然后選擇 Finish。

   有關(guān)上述步驟的詳細信息，請參閱 Managing AVDs.

7. 在 Android Virtual Device Manager中, 點擊工具欄的 Run。模擬器啟動并顯示所選操作系統(tǒng)版本或設(shè)備的啟動畫面.

8. 運行 flutter run 啟動您的設(shè)備. 連接的設(shè)備名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

創(chuàng)建你的flutter應(yīng)用

flutter create myflutter

注意：項目名的要求：

image.png

運行你的flutter項目

cd myflutter
flutter run

注意：首次使用命名進行運行flutter時，會報錯：

image.png

原因是沒有設(shè)備可以運行（包含模擬器和真機），先調(diào)出模擬器，在Mac上，通過Spotlight或使用以下命令找到模擬器:
open -a Simulator

模擬器打開后，二次運行，并體驗熱加載模式（press 'r'）

flutter run

image.png

項目運行：

image.png

參考：
https://flutter.dev/docs/get-started/install
https://flutterchina.club/setup-macos/#運行-flutter-doctor