背景

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

• 混合開發：Flutter擁有豐富的工具和庫，可以幫助您輕松地同時在iOS和Android系統中實現您的想法和創意。 如果您沒有任何移動端開發體驗，Flutter是一種輕松快捷的方式來構建漂亮的移動應用程序。 如果您是一位經驗豐富的iOS或Android開發人員，則可以使用Flutter作為視圖(View)層， 并可以使用已經用Java / ObjC / Swift完成的部分
• 快速開發：Flutter的熱重載可幫助您快速地進行測試、構建UI、添加功能并更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內重載，并且不會丟失狀態
• 富有表現力，漂亮的用戶界面：Flutter內置美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知，為您的用戶帶來全新體驗
• 響應式框架：和一系列基礎widget，輕松構建您的用戶界面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）解決艱難的UI挑戰
• 訪問本地功能和SDK：通過平臺相關的API、第三方SDK和原生代碼讓您的應用變得強大易用。 Flutter允許您復用現有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統功能和系統SDK
• 用于承載和編譯Dart語言和Widget庫的框架，將Dart編譯為原生代碼的SDK
• Dart語言特點面向對象，類定義，單繼承，語法類似C語言，可轉譯為JavaScript

更多了解可到Flutter中文網

準備

windows系統，flutter-io鏡像

安裝

使用鏡像-用戶環境變量配置

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

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

注意： 此鏡像為臨時鏡像，并不能保證一直可用，請隨時關注Flutter中文網 以獲得有關鏡像服務器的最新動態。
window用戶環境變量：我的電腦右鍵-屬性-高級系統設置-高級模塊下面的環境變量-新建用戶變量并配置確定

系統要求

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

操作系統: Windows 7 或更高版本 (64-bit)
磁盤空間: 400 MB (不包括Android Studio的磁盤空間).
工具: Flutter 依賴下面這些命令行工具.
Git for Windows (Git命令行工具)

如果已安裝Git for Windows，請確保命令提示符或PowerShell中運行 git 命令，不然在后面運行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動添加C:\Program Files\Git\bin至Path系統環境變量中。

獲取Flutter SDK

• 去flutter官網下載其 最新可用的安裝包；

注意，Flutter的渠道版本會不停變動，請以Flutter官網為準。另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項目下去下載安裝包 。
有穩定版，測試版，和開發版，我們選擇穩定版3.0.1下載：

• 將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：C:\src\flutter；注意，不要將flutter安裝到需要一些高權限的路徑如C:\Program Files\）。我們解壓到D盤：
  

• 在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行，接下來，你就可以在Flutter命令行運行flutter命令了。
  
  
  這代表flutter控制臺啟動成功

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

上述命令為當前終端窗口臨時設置PATH變量。要將Flutter永久添加到路徑中，請參閱更新路徑。

更新環境變量

要在終端運行 flutter 命令， 你需要添加以下環境變量到系統PATH：

轉到 “控制面板>用戶帳戶>用戶帳戶>更改我的環境變量”
在“用戶變量”下檢查是否有名為“Path”的條目:
如果該條目存在, 新建并追加 flutter\bin的全路徑，使用 ; 作為分隔符.
如果條目不存在, 創建一個新用戶變量 Path ，然后將flutter\bin的全路徑作為它的值.

在“用戶變量”下檢查是否有名為”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目，如果沒有，也添加它們。
重啟Windows以應用此更改

運行flutter doctor

打開一個新的命令提示符或PowerShell窗口并運行以下命令以查看是否需要安裝任何依賴項來完成安裝：

flutter doctor

在命令提示符或PowerShell窗口中運行此命令。目前，Flutter不支持像Git Bash這樣的第三方shell。
該命令檢查您的環境并在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務（以粗體顯示）

例如:

[-] Android toolchain - develop for Android devices
? Android SDK at D:\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.
第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項并自行編譯，所以速度會慢一些，還需耐心等待。以后再運行就會快得多。

表示flutter安裝完畢，后面的錯誤是需要安裝Android編譯環境，以及需要更新Visual Studio

以下各部分介紹如何執行這些任務并完成設置過程。你會看到在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的隱私政策。

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

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

安裝Android環境

安裝Android Studio

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

Flutter需要安裝和配置Android Studio:

• 由于AndroidStudio是國外的沒有vpn直接訪問會有一些問題，以下為中文網下載地址，下載并安裝 Android Studio根據個人設備配置下載.
  
• 啟動Android Studio，然后執行“Android Studio安裝向導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter為Android開發時所必需的，
  除了安裝路徑自定義自己想裝的位置之外其他都點擊下一步，直到Install Type選擇自定義安裝：
  
  然后是選擇界面風格根據自己喜歡選擇：

安裝Sdk的時候路徑可選擇為與Android Studio同級新增一個文件Sdk，然后next

然后會讓我們選擇Android內存，默認選擇即可，然后next，

進入環境安裝下載，next：

然后選擇接受安裝協議，并finish，進入下載安裝

出現這個就代表我們的AndroidStudio下載安裝完畢。

Android Studio系統設置

把Android的開發環境配置到系統里面，打開高級系統設置->高級->環境變量

• 首先我們要配置系統變量，變量名ANDROID_HOME必須全部大寫，變量值為Sdk的安裝路徑：
  
• 系統Path配置，%ANDROID_HOME%\platform-tools,這樣Android才能全局使用
  
  控制臺執行adb devices，是Android提供檢測是否有Android設備連接的指令

adb devices

出現List of devices attached即為成功。

然后再執行flutter doctor:

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [版本 10.0.19044.1706], locale zh-CN) [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)X cmdline-tools component is missingRun `path/to/sdkmanager --install "cmdline-tools;latest"`See https://developer.android.com/studio/command-line for more details.X Android license status unknown.Run `flutter doctor --android-licenses` to accept the SDK licenses.See https://flutter.dev/docs/get-started/install/windows#android-setup for more details. [√] Chrome - develop for the web [X] Visual Studio - develop for WindowsX Visual Studio not installed; this is necessary for Windows development.Download at https://visualstudio.microsoft.com/downloads/.Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2021.1) [√] Connected device (3 available) [√] HTTP Host Availability! Doctor found issues in 2 categories.

這幾個對勾表示Android Studio環境配置成功，但還有一些錯誤，
關于配置的錯誤

cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details.

打開Android Studio設置，這幾個tool設置一下，

然后再執行flutter doctor，看到配置的錯誤已經解決了

但下面是flutter未接受許可錯誤，許可執行：flutter doctor --android-licenses

flutter doctor --android-licenses

進入是否允許接受許可，輸入 y，

連續y,直到執行出現All SDK package licenses accepted，表示許可接受完成。
然后再執行flutter doctor:

可以看出來，需要下載Visual Studio：里面有提示下載的地址：https://visualstudio.microsoft.com/downloads/
然后安裝 “Desktop development with C++” ，默認安裝

然后再執行flutter doctor:

Visual Studio - develop for Windows (the doctor check crashed)X Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us knowabout this issue at https://github.com/flutter/flutter/issues.X Exception: Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER) found while decoding string: [{"instanceId": "3ffd25c1","installDate": "2022-05-30T14:52:30Z","installationName": "VisualStudio/17.2.2+32519.379","installationPath": "D:\\Application\\Microsoft Visual Studio\\2022\\Community","installationVersion": "17.2.32519.379","productId": "Microsoft.VisualStudio.Product.Community","productPath": "D:\\Application\\Microsoft Visual Studio\\2022\\Community\\Common7\\IDE\\devenv.exe","state": 4294967295,"isComplete": true,"isLaunchable": true,"isPrerelease": false,"isRebootRequired": false,"displayName": "Visual Studio Community 2022","description": "����?��� IDE����?��������?��������??������?��","channelId": "VisualStudio.17.Release","channelUri": "https://aka.ms/vs/17/release/channel","enginePath": "C:\\Program Files (x86)\\Microsoft VisualStudio\\Installer\\resources\\app\\ServiceHub\\Services\\Microsoft.VisualStudio.Setup.Service","installedChannelUri": "https://aka.ms/vs/17/release/channel","releaseNotes": "https://docs.microsoft.com/en-us/visualstudio/releases/2022/release-notes-v17.2#17.2.2","thirdPartyNotices": "https://go.microsoft.com/fwlink/?LinkId=661288","updateDate": "2022-05-30T14:52:30.664144Z","catalog": {"buildBranch": "d17.2","buildVersion": "17.2.32519.379","id": "VisualStudio/17.2.2+32519.379","localBuild": "build-lab","manifestName": "VisualStudio","manifestType": "installer","productDisplayVersion": "17.2.2","productLine": "Dev17","productLineVersion": "2022","productMilestone": "RTW","productMilestoneIsPreRelease": "False","productName": "Visual Studio","productPatchVersion": "2","productPreReleaseMilestoneSuffix": "1.0","productSemanticVersion": "17.2.2+32519.379","requiredEngineVersion": "3.2.2148.26540"},"properties": {"campaignId": "2030:b339723e-f580-4215-a586-af436edb4770","channelManifestId": "VisualStudio.17.Release/17.2.2+32519.379","nickname": "","setupEngineFilePath": "C:\\Program Files (x86)\\Microsoft Visual Studio\\Installer\\setup.exe"}}]. The Flutter team would greatly appreciate if you could file a bug explaining exactly what you were doing whenthis happened:https://github.com/flutter/flutter/issues/new/chooseThe source bytes were:[91, 13, 10, 32, 32, 123, 13, 10, 32, 32, 32, 32, 34, 105, 110, 115, 116, 97, 110, 99, 101, 73, 100, 34, 58, 32,...][√] Android Studio (version 2021.1) [√] Connected device (3 available) [√] HTTP Host Availability! Doctor found issues in 1 category.

意思就是VisualStudio安裝程序提供的vswhere已經過時，在utf8開關上有個BUG，升級vswhere即可解決。

首先下載最新的vswhere 3.0.2可能需要VPN

找到VisualStudio安裝程序的安裝目錄，我是C:\Program Files (x86)\Microsoft Visual Studio\Installer中vswhere.exe文件，并替換

然后再執行flutter doctor:

至此，flutter的windows環境和Android Studio環境配置完成

Android設備設置

設置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安裝目錄。

設置Android模擬器-Genymotion

• Genymotion 下載地址：https://www.genymotion.com/download/
• Genymotion 對于個人免費，對于組織收費我們選擇免費，我們選擇帶虛擬機
  
  安裝的時候有個Oracle VM VirtualBox安裝，也是默認必須要的，一起安裝，最好默認路徑安裝。
  然后注冊個賬號，選擇個人使用，并登錄
  
  然后里面有各種型號的Android手機的模擬器，點擊自己想要的手機型號的模擬器并下載安裝：
  
  下載中：
  
  啟動模擬器：
  
  然后我們的Android模擬器就完美啟動了：
  

經驗

• 有Android Studio中模擬器的需要系統環境變量配置名字:ANDROID_SDK_HOME
  值為avd路徑

注意

環境配置過程中，更多的是要注意用戶環境配置，和系統環境配置，根據流程見招拆招，綻放不一樣的焰火。

總結

以上是生活随笔為你收集整理的跨平台flutter- window与Android Studio环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。