跨平台flutter- window与Android Studio环境配置
背景
Flutter是谷歌的混合移動UI框架，一套代碼可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面，Flutter可以與已有的代碼一起混編，Flutter是完全免費并且開源的，正被越來越多的開發(fā)者和組織使用。
- 混合開發(fā)：Flutter擁有豐富的工具和庫，可以幫助您輕松地同時在iOS和Android系統(tǒng)中實現(xiàn)您的想法和創(chuàng)意。 如果您沒有任何移動端開發(fā)體驗，Flutter是一種輕松快捷的方式來構(gòu)建漂亮的移動應(yīng)用程序。 如果您是一位經(jīng)驗豐富的iOS或Android開發(fā)人員，則可以使用Flutter作為視圖(View)層， 并可以使用已經(jīng)用Java / ObjC / Swift完成的部分
- 快速開發(fā)：Flutter的熱重載可幫助您快速地進行測試、構(gòu)建UI、添加功能并更快地修復(fù)錯誤。在iOS和Android模擬器或真機上可以在亞秒內(nèi)重載，并且不會丟失狀態(tài)
- 富有表現(xiàn)力，漂亮的用戶界面：Flutter內(nèi)置美麗的Material Design和Cupertino（iOS風(fēng)格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知，為您的用戶帶來全新體驗
- 響應(yīng)式框架：和一系列基礎(chǔ)widget，輕松構(gòu)建您的用戶界面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）解決艱難的UI挑戰(zhàn)
- 訪問本地功能和SDK：通過平臺相關(guān)的API、第三方SDK和原生代碼讓您的應(yīng)用變得強大易用。 Flutter允許您復(fù)用現(xiàn)有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK
- 用于承載和編譯Dart語言和Widget庫的框架，將Dart編譯為原生代碼的SDK
- Dart語言特點面向?qū)ο?#xff0c;類定義，單繼承，語法類似C語言，可轉(zhuǎn)譯為JavaScript
更多了解可到Flutter中文網(wǎng)
準備
windows系統(tǒng)，flutter-io鏡像
安裝
使用鏡像-用戶環(huán)境變量配置
由于在國內(nèi)訪問Flutter有時可能會受到限制，Flutter官方為中國開發(fā)者搭建了臨時鏡像，大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn注意： 此鏡像為臨時鏡像，并不能保證一直可用，請隨時關(guān)注Flutter中文網(wǎng) 以獲得有關(guān)鏡像服務(wù)器的最新動態(tài)。
window用戶環(huán)境變量：我的電腦右鍵-屬性-高級系統(tǒng)設(shè)置-高級模塊下面的環(huán)境變量-新建用戶變量并配置確定
系統(tǒng)要求
要安裝并運行Flutter，您的開發(fā)環(huán)境必須滿足以下最低要求:
操作系統(tǒng): Windows 7 或更高版本 (64-bit)
磁盤空間: 400 MB (不包括Android Studio的磁盤空間).
工具: Flutter 依賴下面這些命令行工具.
Git for Windows (Git命令行工具)
如果已安裝Git for Windows，請確保命令提示符或PowerShell中運行 git 命令，不然在后面運行flutter doctor時將出現(xiàn)Unable to find git in your PATH錯誤, 此時需要手動添加C:\Program Files\Git\bin至Path系統(tǒng)環(huán)境變量中。
獲取Flutter SDK
- 去flutter官網(wǎng)下載其 最新可用的安裝包；
注意，Flutter的渠道版本會不停變動，請以Flutter官網(wǎng)為準。另外，在中國大陸地區(qū)，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項目下去下載安裝包 。
有穩(wěn)定版，測試版，和開發(fā)版，我們選擇穩(wěn)定版3.0.1下載：
-
將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：C:\src\flutter；注意，不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\）。我們解壓到D盤：
-
在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行，接下來，你就可以在Flutter命令行運行flutter命令了。
這代表flutter控制臺啟動成功
注意： 由于一些flutter命令需要聯(lián)網(wǎng)獲取數(shù)據(jù)，如果您是在國內(nèi)訪問，由于眾所周知的原因，直接訪問很可能不會成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國內(nèi)開發(fā)者搭建的臨時鏡像。詳情請參考 Using Flutter in China
上述命令為當(dāng)前終端窗口臨時設(shè)置PATH變量。要將Flutter永久添加到路徑中，請參閱更新路徑。
更新環(huán)境變量
要在終端運行 flutter 命令， 你需要添加以下環(huán)境變量到系統(tǒng)PATH：
轉(zhuǎn)到 “控制面板>用戶帳戶>用戶帳戶>更改我的環(huán)境變量”
在“用戶變量”下檢查是否有名為“Path”的條目:
如果該條目存在, 新建并追加 flutter\bin的全路徑，使用 ; 作為分隔符.
如果條目不存在, 創(chuàng)建一個新用戶變量 Path ，然后將flutter\bin的全路徑作為它的值.
在“用戶變量”下檢查是否有名為”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目，如果沒有，也添加它們。
重啟Windows以應(yīng)用此更改
運行flutter doctor
打開一個新的命令提示符或PowerShell窗口并運行以下命令以查看是否需要安裝任何依賴項來完成安裝：
flutter doctor在命令提示符或PowerShell窗口中運行此命令。目前，Flutter不支持像Git Bash這樣的第三方shell。
該命令檢查您的環(huán)境并在終端窗口中顯示報告。Dart SDK已經(jīng)在捆綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執(zhí)行的任務(wù)（以粗體顯示）
例如:
[-] 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編譯環(huán)境，以及需要更新Visual Studio
以下各部分介紹如何執(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并顯示當(dāng)前設(shè)置，然后執(zhí)行flutter config。 請參閱Google的隱私政策。
編輯器設(shè)置
使用 flutter 命令行工具，您可以使用任何編輯器來開發(fā)Flutter應(yīng)用程序。輸入flutter help在提示符下查看可用的工具。
我們建議使用我們的插件來獲得豐富的IDE體驗，支持編輯，運行和調(diào)試Flutter應(yīng)用程序。請參閱編輯器設(shè)置了解詳細步驟
安裝Android環(huán)境
安裝Android Studio
要為Android開發(fā)Flutter應(yīng)用，您可以使用Mac，Windows或Linux（64位）機器.
Flutter需要安裝和配置Android Studio:
- 由于AndroidStudio是國外的沒有vpn直接訪問會有一些問題，以下為中文網(wǎng)下載地址，下載并安裝 Android Studio根據(jù)個人設(shè)備配置下載.
- 啟動Android Studio，然后執(zhí)行“Android Studio安裝向?qū)А薄＿@將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構(gòu)建工具，這是Flutter為Android開發(fā)時所必需的，
除了安裝路徑自定義自己想裝的位置之外其他都點擊下一步，直到Install Type選擇自定義安裝：
然后是選擇界面風(fēng)格根據(jù)自己喜歡選擇：
安裝Sdk的時候路徑可選擇為與Android Studio同級新增一個文件Sdk，然后next
然后會讓我們選擇Android內(nèi)存，默認選擇即可，然后next，
進入環(huán)境安裝下載，next：
然后選擇接受安裝協(xié)議，并finish，進入下載安裝
出現(xiàn)這個就代表我們的AndroidStudio下載安裝完畢。
Android Studio系統(tǒng)設(shè)置
把Android的開發(fā)環(huán)境配置到系統(tǒng)里面，打開高級系統(tǒng)設(shè)置->高級->環(huán)境變量
- 首先我們要配置系統(tǒng)變量，變量名ANDROID_HOME必須全部大寫，變量值為Sdk的安裝路徑：
- 系統(tǒng)Path配置，%ANDROID_HOME%\platform-tools,這樣Android才能全局使用
控制臺執(zhí)行adb devices，是Android提供檢測是否有Android設(shè)備連接的指令
出現(xiàn)List of devices attached即為成功。
然后再執(zhí)行flutter doctor:
這幾個對勾表示Android Studio環(huán)境配置成功，但還有一些錯誤，
關(guān)于配置的錯誤
打開Android Studio設(shè)置，這幾個tool設(shè)置一下，
然后再執(zhí)行flutter doctor，看到配置的錯誤已經(jīng)解決了
但下面是flutter未接受許可錯誤，許可執(zhí)行：flutter doctor --android-licenses
flutter doctor --android-licenses進入是否允許接受許可，輸入 y，
連續(xù)y,直到執(zhí)行出現(xiàn)All SDK package licenses accepted，表示許可接受完成。
然后再執(zhí)行flutter doctor:
可以看出來，需要下載Visual Studio：里面有提示下載的地址：https://visualstudio.microsoft.com/downloads/
然后安裝 “Desktop development with C++” ，默認安裝
然后再執(zhí)行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已經(jīng)過時，在utf8開關(guān)上有個BUG，升級vswhere即可解決。
首先下載最新的vswhere 3.0.2可能需要VPN
找到VisualStudio安裝程序的安裝目錄，我是C:\Program Files (x86)\Microsoft Visual Studio\Installer中vswhere.exe文件，并替換
然后再執(zhí)行flutter doctor:
至此，flutter的windows環(huán)境和Android Studio環(huán)境配置完成
Android設(shè)備設(shè)置
設(shè)置Android設(shè)備
要準備在Android設(shè)備上運行并測試您的Flutter應(yīng)用，您需要安裝Android 4.1（API level 16）或更高版本的Android設(shè)備.
在您的設(shè)備上啟用 開發(fā)人員選項 和 USB調(diào)試 。詳細說明可在Android文檔中找到。
使用USB將手機插入電腦。如果您的設(shè)備出現(xiàn)提示，請授權(quán)您的計算機訪問您的設(shè)備。
在終端中，運行 flutter devices 命令以驗證Flutter識別您連接的Android設(shè)備。
運行啟動您的應(yīng)用程序 flutter run。
默認情況下，Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環(huán)境變量設(shè)置為SDK安裝目錄。
設(shè)置Android模擬器-Genymotion
- Genymotion 下載地址：https://www.genymotion.com/download/
- Genymotion 對于個人免費，對于組織收費我們選擇免費，我們選擇帶虛擬機
安裝的時候有個Oracle VM VirtualBox安裝，也是默認必須要的，一起安裝，最好默認路徑安裝。
然后注冊個賬號，選擇個人使用，并登錄
然后里面有各種型號的Android手機的模擬器，點擊自己想要的手機型號的模擬器并下載安裝：
下載中：
啟動模擬器：
然后我們的Android模擬器就完美啟動了：
經(jīng)驗
- 有Android Studio中模擬器的需要系統(tǒng)環(huán)境變量配置名字:ANDROID_SDK_HOME
值為avd路徑
注意
環(huán)境配置過程中，更多的是要注意用戶環(huán)境配置，和系統(tǒng)環(huán)境配置，根據(jù)流程見招拆招，綻放不一樣的焰火。
總結(jié)
以上是生活随笔為你收集整理的跨平台flutter- window与Android Studio环境配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： springCloud学习【4】之ela
- 下一篇： 实测：一周不更新文章头条号指数会掉多少？