Flutter 開發 IDE 環境的詳細配置

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

Dart 是一種針對 web 和移動設備開發進行了優化的編程語言。基于 Dart 的以下特點，您可以通過它在不同的設備上創作華麗的、 高品質體驗的應用：

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

在macOS上搭建Flutter開發環境

使用鏡像

由于在國內訪問 Flutter 有時可能會受到限制，Flutter 官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到用戶環境變量中：

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

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

系統要求

要安裝并運行 Flutter，您的開發環境必須滿足以下最低要求:

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

獲取Flutter SDK

  1. 去flutter官網下載其最新可用的安裝包，轉到下載頁 。

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

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

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

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

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

要更新現有版本的Flutter，請參閱升級Flutter。

運行 flutter doctor

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

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

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

  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）時，它會下載它自己的依賴項并自行編譯。以后再運行就會快得多。

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

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

該 flutter 工具使用 Google Analytics 匿名報告功能使用情況統計信息和基本崩潰報告。 這些數據用于幫助改進 Flutter 工具。Analytics 不是一運行或在運行涉及flutter config 的任何命令時就發送， 因此您可以在發送任何數據之前退出分析。要禁用報告，請執行 flutter config --no-analytics 并顯示當前設置，然后執行 flutter config。 請參閱 Google 的隱私政策。

更新環境變量

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

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

  1. 確定您 Flutter SDK 的目錄，您將在步驟3中用到。
  2. 打開(或創建) $HOME/.bash_profile，文件路徑和文件名可能在您的機器上不同。
  3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆 Flutter 的 git repo 的路徑:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
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命令驗證目錄是否在已經在PATH中:
echo $PATH

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

編輯器設置

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

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

平臺設置

macOS 支持為 iOS 和 Android 開發 Flutter 應用程序。現在完成兩個平臺設置步驟中的至少一個，以便能夠構建并運行您的第一個Flutter應用程序

iOS 設置

安裝 Xcode

要為 iOS 開發 Flutter 應用程序，您需要 Xcode 7.2 或更高版本:

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

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

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

使用Xcode，您可以在 iOS 設備或模擬器上運行 Flutter 應用程序。

設置iOS模擬器

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

  1. 在 Mac 上，通過 Spotlight 或使用以下命令找到模擬器:
open -a Simulator
  1. 通過檢查模擬器 硬件>設備 菜單中的設置，確保您的模擬器正在使用64位設備（iPhone 5s 或更高版本）。
  2. 根據您的開發機器的屏幕大小，模擬的高清屏 iOS 設備可能會使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設置設備比例。
  3. 運行 flutter run 啟動您的應用。
安裝到 iOS 設備

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

  1. 安裝 homebrew （如果已經安裝了brew，跳過此步驟）。
  2. 打開終端并運行這些命令來安裝用于將 Flutter 應用安裝到 iOS 設備的工具。
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

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

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

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

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

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

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

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

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

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

  • 如果Xcode中的自動簽名失敗，請驗證項目的 General > Identity > Bundle Identifier 值是否唯一.
Bundle Identifier
  1. 運行啟動您的應用程序 flutter run。

Android 設置

安裝 Android Studio

要為 Android 開發 Flutter 應用，您可以使用 Mac，Windows 或 Linux（64位）機器.

Flutter 需要安裝和配置 Android Studio:

  1. 下載并安裝 Android Studio.

  2. 啟動 Android Studio，然后執行 “Android Studio安裝向導”。這將安裝最新的 Android SDK，Android SDK 平臺工具和 Android SDK 構建工具，這是 Flutter 為 Android 開發時所必需的。

設置您的 Android 設備

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

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

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

設置 Android 模擬器

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

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

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

  3. 選擇一個設備并選擇 Next。

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

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

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

    有關上述步驟的詳細信息，請參閱 Managing AVDs.

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

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

配置編輯器

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

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

Visual Studio Code (VS Code) 安裝

VS Code: 輕量級編輯器，支持Flutter運行和調試.

安裝 VS Code
  • VS Code，安裝 1.20.1 或更高版本.
安裝Flutter插件
  1. 啟動 VS Code
  2. 調用 View>Command Palette…
  3. 輸入 ‘install’，然后選擇 Extensions: Install Extension action
  4. 在搜索框輸入 flutter，在搜索結果列表中選擇 ‘Flutter’，然后點擊 Install
  5. 選擇 ‘OK’ 重新啟動 VS Code
通過Flutter Doctor驗證您的設置
  1. 調用 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 開發工作流 (運行、調試、熱重載等).
  • Dart插件：提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

要安裝這些:

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

體驗

本頁介紹如何 “試駕” Flutter: 從我們的模板創建一個新的 Flutter 應用程序，運行它，并學習如何使用 Hot Reload 進行更新重載

Flutter 是一個靈活的工具包，所以請首先選擇您的開發工具來編寫、構建和運行您的 Flutter 應用程序。

VS Code: 輕量級編輯器，支持Flutter運行和調試.

創建新的應用

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

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

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

運行應用程序

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

體驗熱重載

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

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

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

聲明：本文并非由本人所創，僅整理一些開發技能知識，以作存檔用于學習。

點贊+關注，第一時間獲取技術干貨和最新知識點，謝謝你的支持！

最后祝大家生活愉快~

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,333評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,491評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,263評論 0贊 374
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,946評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,708評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,186評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,255評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,409評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,939評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,518評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,209評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2贊 373