Flutter 開發(fā) IDE 環(huán)境的詳細配置

Flutter 是谷歌的移動 UI 框架，可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter 可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter 正在被越來越多的開發(fā)者和組織使用，并且Flutter 是完全免費、開源的。

Dart 是一種針對 web 和移動設(shè)備開發(fā)進行了優(yōu)化的編程語言。基于 Dart 的以下特點，您可以通過它在不同的設(shè)備上創(chuàng)作華麗的、 高品質(zhì)體驗的應(yīng)用：

  • 高效優(yōu)秀的 編程語言
  • 豐富強大的框架
  • 方便靈活的工具

在macOS上搭建Flutter開發(fā)環(huán)境

使用鏡像

由于在國內(nèi)訪問 Flutter 有時可能會受到限制，F(xiàn)lutter 官方為中國開發(fā)者搭建了臨時鏡像，大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意： 此鏡像為臨時鏡像，并不能保證一直可用，讀者可以參考詳情請參考 Using Flutter in China 以獲得有關(guān)鏡像服務(wù)器的最新動態(tài)。

系統(tǒng)要求

要安裝并運行 Flutter，您的開發(fā)環(huán)境必須滿足以下最低要求:

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

獲取Flutter SDK

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

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

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

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
  1. 添加 Flutter 相關(guān)工具到 path 中：
export PATH=`pwd`/flutter/bin:$PATH

此代碼只能暫時針對當前命令行窗口設(shè)置PATH環(huán)境變量，要想永久將 Flutter 添加到 PATH 中，請參考下面更新環(huán)境變量部分。

注意： 由于一些flutter命令需要聯(lián)網(wǎng)獲取數(shù)據(jù)，如果您是在國內(nèi)訪問，由于眾所周知的原因，直接訪問很可能不會成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國內(nèi)開發(fā)者搭建的臨時鏡像。詳情請參考 Using Flutter in China

要更新現(xiàn)有版本的Flutter，請參閱升級Flutter。

運行 flutter doctor

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

flutter doctor

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

例如:

[-] 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.io/setup/#android-setup for detailed instructions.

一般的錯誤會是 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 工具使用 Google Analytics 匿名報告功能使用情況統(tǒng)計信息和基本崩潰報告。 這些數(shù)據(jù)用于幫助改進 Flutter 工具。Analytics 不是一運行或在運行涉及flutter config 的任何命令時就發(fā)送， 因此您可以在發(fā)送任何數(shù)據(jù)之前退出分析。要禁用報告，請執(zhí)行 flutter config --no-analytics 并顯示當前設(shè)置，然后執(zhí)行 flutter config。 請參閱 Google 的隱私政策。

更新環(huán)境變量

您在命令行只能更新當前會話的 PATH 變量，如 Clone Flutter repo 所示。 但是，您可能需要的是永久更新此變量，以便您可以運行flutter命令在任何終端會話中。

對于所有終端會話永久修改此變量的步驟是和特定計算機系統(tǒng)相關(guān)的。通常，您會在打開新窗口時將設(shè)置環(huán)境變量的命令添加到執(zhí)行的文件中。例如

  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 的路徑，比如“~/document/code”

 export PATH=~/document/code/flutter/bin:$PATH
  1. 運行 source $HOME/.bash_profile 刷新當前終端窗口

注意: 如果你使用的是zsh，終端啟動時 ~/.bash_profile 將不會被加載，解決辦法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

  1. 通過運行flutter/bin命令驗證目錄是否在已經(jīng)在PATH中:
echo $PATH

更多詳細信息，請參閱 this StackExchange question.

編輯器設(shè)置

使用 flutter 命令行工具，您可以使用任何編輯器來開發(fā) Flutter 應(yīng)用程序。輸入flutter help在提示符下查看可用的工具。

我們建議使用我們的插件來獲得 豐富的IDE體驗，支持編輯，運行和調(diào)試Flutter應(yīng)用程序。請參閱 編輯器設(shè)置 了解詳細步驟。

平臺設(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ù)情況，當您想要使用最新版本的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
  1. 通過檢查模擬器 硬件>設(shè)備 菜單中的設(shè)置，確保您的模擬器正在使用64位設(shè)備（iPhone 5s 或更高版本）。
  2. 根據(jù)您的開發(fā)機器的屏幕大小，模擬的高清屏 iOS 設(shè)備可能會使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設(shè)置設(shè)備比例。
  3. 運行 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 簽名流程來配置您的項目:

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

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

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

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

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

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

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

  • 如果Xcode中的自動簽名失敗，請驗證項目的 General > Identity > Bundle Identifier 值是否唯一.
Bundle Identifier
  1. 運行啟動您的應(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。

配置編輯器

您可以使用任何文本編輯器與命令行工具來構(gòu)建 Flutter 應(yīng)用程序。 不過，我們建議使用我們的編輯器插件之一，以獲得更好的體驗。通過我們的編輯器插件，您可以獲得代碼補全、語法高亮、widget 編輯輔助、運行和調(diào)試支持等等。

按照下面步驟為 Android Studio、IntelliJ 或 VS Code 添加編輯器插件。如果你想使用其他的編輯器， 那沒關(guān)系，直接跳到 下一步:創(chuàng)建并運行你的第一個應(yīng)用程序。

Visual Studio Code (VS Code) 安裝

VS Code: 輕量級編輯器，支持Flutter運行和調(diào)試.

安裝 VS Code
  • VS Code，安裝 1.20.1 或更高版本.
安裝Flutter插件
  1. 啟動 VS Code
  2. 調(diào)用 View>Command Palette…
  3. 輸入 ‘install’，然后選擇 Extensions: Install Extension action
  4. 在搜索框輸入 flutter，在搜索結(jié)果列表中選擇 ‘Flutter’，然后點擊 Install
  5. 選擇 ‘OK’ 重新啟動 VS Code
通過Flutter Doctor驗證您的設(shè)置
  1. 調(diào)用 View>Command Palette…
  2. 輸入 ‘doctor’，然后選擇 ‘Flutter: Run Flutter Doctor’ action
  3. 查看“OUTPUT”窗口中的輸出是否有問題

Android Studio 安裝

Android Studio: 為Flutter提供完整的 IDE 體驗

安裝Android Studio

或者，您也可以使用IntelliJ：

安裝 Flutter 和 Dart 插件

需要安裝兩個插件:

  • Flutter插件：支持 Flutter 開發(fā)工作流 (運行、調(diào)試、熱重載等).
  • Dart插件：提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

要安裝這些:

  1. 啟動 Android Studio。
  2. 打開插件首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)。
  3. 選擇 Browse repositories…, 選擇 Flutter 插件并點擊 install。
  4. 重啟 Android Studio 后插件生效。

體驗

本頁介紹如何 “試駕” Flutter: 從我們的模板創(chuàng)建一個新的 Flutter 應(yīng)用程序，運行它，并學(xué)習(xí)如何使用 Hot Reload 進行更新重載

Flutter 是一個靈活的工具包，所以請首先選擇您的開發(fā)工具來編寫、構(gòu)建和運行您的 Flutter 應(yīng)用程序。

VS Code: 輕量級編輯器，支持Flutter運行和調(diào)試.

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

  1. 啟動 VS Code
  2. 調(diào)用 View>Command Palette…
  3. 輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
  4. 輸入 Project 名稱 (如myapp), 然后按回車鍵
  5. 指定放置項目的位置，然后按藍色的確定按鈕
  6. 等待項目創(chuàng)建繼續(xù)，并顯示 main.dart 文件

上述命令創(chuàng)建一個 Flutter 項目，項目名為 myapp，其中包含一個使用 Material 組件的簡單的 演示應(yīng)用程序。

在項目目錄中，您的應(yīng)用程序的代碼位于 lib/main.dart.

運行應(yīng)用程序

  1. 確保在 VS Code 的右下角選擇了目標設(shè)備
  2. 按 F5 鍵或調(diào)用Debug>Start Debugging
  3. 等待應(yīng)用程序啟動
  4. 如果一切正常，在應(yīng)用程序建成功后，您應(yīng)該在您的設(shè)備或模擬器上看到應(yīng)用程序:

體驗熱重載

Flutter 可以通過 熱重載（hot reload） 實現(xiàn)快速的開發(fā)周期，熱重載就是無需重啟應(yīng)用程序就能實時加載修改后的代碼，并且不會丟失狀態(tài)（譯者語: 如果是一個web開發(fā)者，那么可以認為這和 webpack 的熱重載是一樣的）。簡單的對代碼進行更改，然后告訴 IDE 或命令行工具你需要重新加載（點擊 reload 按鈕），你就會在你的設(shè)備或模擬器上看到更改。

  1. 用你喜歡的編輯器打開文件 lib/main.dart
  2. 將字符串
    'You have pushed the button this many times:'更改為
    'You have clicked the button this many times:'
  3. 不要按“停止”按鈕，讓您的應(yīng)用繼續(xù)運行。
  4. 要查看您的更改，請調(diào)用 Save (cmd-s / ctrl-s), 或者點擊 熱重載按鈕 (綠色圓形箭頭按鈕)。

你會立即在運行的應(yīng)用程序中看到更新的字符串。

聲明：本文并非由本人所創(chuàng)，僅整理一些開發(fā)技能知識，以作存檔用于學(xué)習(xí)。

點贊+關(guān)注，第一時間獲取技術(shù)干貨和最新知識點，謝謝你的支持！

最后祝大家生活愉快~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容