搭建Flutter開(kāi)發(fā)環(huán)境

工欲善其事必先利其器扎附，本節(jié)首先會(huì)分別介紹一下在Windows和macOS下Flutter SDK的安裝抠忘，然后再介紹一下配IDE和模擬器的使用撩炊。

安裝Flutter

由于Flutter會(huì)同時(shí)構(gòu)建Android和IOS兩個(gè)平臺(tái)的發(fā)布包，所以Flutter同時(shí)依賴Android SDK和iOS SDK崎脉，在安裝Flutter時(shí)也需要安裝相應(yīng)平臺(tái)的構(gòu)建工具和SDK拧咳。下面我們分別介紹一下Windows和macOS下的環(huán)境搭建。

注意：本節(jié)介紹的安裝方式隨著Flutter的升級(jí)可能會(huì)發(fā)生變化囚灼，如果下面介紹的內(nèi)容在您安裝Flutter時(shí)已經(jīng)失效骆膝，請(qǐng)?jiān)L問(wèn)Flutter官網(wǎng)，按照官網(wǎng)最新的安裝教程安裝灶体。

1. 使用鏡像

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

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

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

：此鏡像為臨時(shí)鏡像蝎抽，并不能保證一直可用政钟，讀者可以參考https://flutter.dev/community/china 以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。

2. 在Windows上搭建Flutter開(kāi)發(fā)環(huán)境

1）系統(tǒng)要求

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

操作系統(tǒng): Windows 7 或更高版本 (64-bit)

磁盤空間: 400 MB (不包括Android Studio的磁盤空間).

工具: Flutter 依賴下面這些命令行工具.

PowerShell 5.0?(opens new window)或更新的版本

Git for Windows?(opens new window)(Git命令行工具)养交；

如果已安裝Git for Windows，請(qǐng)確逼盎拢可以在命令提示符或PowerShell中運(yùn)行 git 命令

2）獲取Flutter SDK

去flutter官網(wǎng)下載其最新可用的安裝包碎连，下載地址：https://flutter.dev/docs/development/tools/sdk/releases 。

注意驮履，F(xiàn)lutter的渠道版本會(huì)不停變動(dòng)鱼辙，請(qǐng)以Flutter官網(wǎng)為準(zhǔn)。另外玫镐，在中國(guó)大陸地區(qū)座每，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻摘悴，讀者也可以去Flutter github項(xiàng)目下去下載安裝包候引，地址：https://github.com/flutter/flutter/releases 静浴。

將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：C:\src\flutter穿撮；注意抬驴，不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\）。

在Flutter安裝目錄的flutter文件下找到flutter_console.bat算色，雙擊運(yùn)行并啟動(dòng)flutter命令行，接下來(lái)，你就可以在Flutter命令行運(yùn)行flutter命令了秦陋。

更新環(huán)境變量

如果你想在Windows系統(tǒng)自帶命令行運(yùn)行flutter命令，需要添加以下環(huán)境變量到用戶PATH：

轉(zhuǎn)到“控制面板>用戶帳戶>用戶帳戶>更改我的環(huán)境變量”

在“用戶變量”下檢查是否有名為“Path”的條目:

如果該條目存在治笨，追加flutter\bin的全路徑驳概，使用 ; 作為分隔符.

如果該條目不存在，創(chuàng)建一個(gè)新用戶變量Path 旷赖，然后將?flutter\bin?的全路徑作為它的值.

重啟Windows以應(yīng)用此更改.

運(yùn)行flutter doctor命令

在Flutter命令行運(yùn)行如下命令來(lái)查看是否還需要安裝其他依賴顺又，如果需要，安裝它們：

flutter doctor

該命令檢查你的環(huán)境并在命令行窗口中顯示報(bào)告等孵。Dart SDK已經(jīng)在打包在Flutter SDK里了稚照，沒(méi)有必要單獨(dú)安裝Dart。 仔細(xì)檢查命令行輸出以獲取可能需要安裝的其他軟件或進(jìn)一步需要執(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.dev/setup/android-setup for detailed instructions.

第一次運(yùn)行flutter命令（如flutter doctor）時(shí)果录，它會(huì)下載它自己的依賴項(xiàng)并自行編譯。以后再運(yùn)行就會(huì)快得多咐熙。缺失的依賴需要安裝一下弱恒，安裝完成后再運(yùn)行flutter doctor命令來(lái)驗(yàn)證是否安裝成功。

3）Android設(shè)置

Flutter依賴于Android Studio的全量安裝棋恼。Android Studio不僅可以管理Android 平臺(tái)依賴斤彼、SDK版本等，而且它也是Flutter開(kāi)發(fā)推薦的IDE之一（當(dāng)然蘸泻，你也可以使用其他編輯器或IDE琉苇，我們將會(huì)在后面討論）。

安裝Android Studio

下載并安裝Android Studio悦施，下載地址：https://developer.android.com/studio/index.html 并扇。

啟動(dòng)Android Studio，然后執(zhí)行“Android Studio安裝向?qū)А甭盏＿@將安裝最新的Android SDK穷蛹、Android SDK平臺(tái)工具和Android SDK構(gòu)建工具，這些是用Flutter進(jìn)行Android開(kāi)發(fā)所需要的昼汗。

4）安裝遇到問(wèn)題肴熏？

如果在安裝過(guò)程中遇到問(wèn)題，可以先去flutter官網(wǎng)查看一下安裝方式是否發(fā)生變化顷窒，或者在網(wǎng)上搜索一下解決方案蛙吏。

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

在masOS下可以同時(shí)進(jìn)行Android和iOS設(shè)備的測(cè)試源哩。

1）系統(tǒng)要求

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

操作系統(tǒng): macOS (64-bit)

磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.

工具: Flutter 依賴下面這些命令行工具.

bash鸦做、mkdir励烦、rm、git泼诱、curl坛掠、unzip、which

2）獲取Flutter SDK

去flutter官網(wǎng)下載其最新可用的安裝包治筒，官網(wǎng)地址：https://flutter.dev/sdk-archive/macos

注意屉栓，F(xiàn)lutter的渠道版本會(huì)不停變動(dòng)，請(qǐng)以Flutter官網(wǎng)為準(zhǔn)耸袜。另外友多，在中國(guó)大陸地區(qū)，要想正常獲取安裝包列表或下載安裝包句灌，可能需要翻墻夷陋，讀者也可以去Flutter github項(xiàng)目下去下載安裝包欠拾，地址：https://github.com/flutter/flutter/releases 胰锌。

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

cd~/developmentunzip~/Downloads/flutter_macos_v0.5.1-beta.zip

添加flutter相關(guān)工具到path中：

exportPATH=`pwd`/flutter/bin:$PATH

此代碼只能暫時(shí)針對(duì)當(dāng)前命令行窗口設(shè)置PATH環(huán)境變量藐窄，要想永久將Flutter添加到PATH中請(qǐng)參考下面更新環(huán)境變量?部分资昧。

運(yùn)行flutter doctor命令

這一步和Windows下步驟一致，不再贅述荆忍。

更新環(huán)境變量

將Flutter添加到PATH中格带，可以在任何終端會(huì)話中運(yùn)行flutter命令。

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

確定您Flutter SDK的目錄記為“FLUTTER_INSTALL_PATH”微宝，您將在步驟3中用到棺亭。

打開(kāi)(或創(chuàng)建)?$HOME/.bash_profile。文件路徑和文件名可能在你的電腦上不同.

添加以下路徑:

exportPATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH

例如筆者Flutter 安裝目錄是“~/code/flutter_dir”蟋软，那么代碼為：

export PATH=~/code/flutter_dir/flutter/bin:$PATH

運(yùn)行source $HOME/.bash_profile?刷新當(dāng)前終端窗口镶摘。

注意:如果你使用終端是zsh，終端啟動(dòng)時(shí)~/.bash_profile將不會(huì)被加載岳守，解決辦法就是修改～/.zshrc凄敢，在其中添加：source ～/.bash_profile

驗(yàn)證“flutter/bin”是否已在PATH中：

echo $PATH

3）安裝Android Studio

和Window一樣，要在Android設(shè)備上構(gòu)建并運(yùn)行Flutter程序都需要先安裝Android Studio湿痢，讀者可以先自行下載并安裝Android Studio涝缝，在此不再贅述。

4. 升級(jí) Flutter

1) Flutter SDK分支

Flutter SDK有多個(gè)分支，如beta俊卤、dev嫩挤、master、stable消恍，其中stable分支為穩(wěn)定分支（日后有新的穩(wěn)定版本發(fā)布后可能也會(huì)有新的穩(wěn)定分支岂昭，如1.0.0），dev和master為開(kāi)發(fā)分支狠怨，安裝flutter后约啊，你可以運(yùn)行flutter channel查看所有分支，如筆者本地運(yùn)行后佣赖，結(jié)果如下：

Flutter channels:

? beta

? dev

* master

帶"*"號(hào)的分支即你本地的Flutter SDK 跟蹤的分支恰矩，要切換分支，可以使用flutter channel beta或flutter channel master憎蛤，F(xiàn)lutter官方建議跟蹤穩(wěn)定分支外傅，但你也可以跟蹤master分支，這樣可以查看最新的變化俩檬，但這樣穩(wěn)定性要低的多萎胰。

2) 升級(jí)Flutter SDK和依賴包

要升級(jí)flutter sdk，只需一句命令：

flutter upgrade

該命令會(huì)同時(shí)更新Flutter SDK和你的flutter項(xiàng)目依賴包棚辽。如果你只想更新項(xiàng)目依賴包（不包括Flutter SDK）技竟，可以使用如下命令：

flutter packages get獲取項(xiàng)目所有的依賴包。

flutter packages upgrade?獲取項(xiàng)目所有依賴包的最新版本屈藐。

IDE配置與使用

理論上可以使用任何文本編輯器與命令行工具來(lái)構(gòu)建Flutter應(yīng)用程序榔组。 不過(guò)，F(xiàn)lutter官方建議使用Android Studio和VS Code之一以獲得更好的開(kāi)發(fā)體驗(yàn)联逻。Flutter官方提供了這兩款編輯器插件搓扯，通過(guò)IDE和插件可獲得代碼補(bǔ)全、語(yǔ)法高亮包归、widget編輯輔助锨推、運(yùn)行和調(diào)試支持等功能，可以幫助我們極大的提高開(kāi)發(fā)效率箫踩。下面我們分別介紹一下Android Studio和VS Code的配置及使用（Android Studio和VS Code讀者可以在其官網(wǎng)獲得最新的安裝爱态，由于安裝比較簡(jiǎn)單，故不再贅述）境钟。

1. Android Studio 配置與使用

由于Android Studio是基于IntelliJ IDEA開(kāi)發(fā)的锦担，所以讀者也可以使用IntelliJ IDEA。

1）安裝Flutter和Dart插件

需要安裝兩個(gè)插件:

Flutter插件： 支持Flutter開(kāi)發(fā)工作流 (運(yùn)行慨削、調(diào)試洞渔、熱重載等)套媚。

Dart插件： 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等)磁椒。

安裝步驟：

啟動(dòng)Android Studio堤瘤。

打開(kāi)插件首選項(xiàng)(macOS：Preferences>Plugins, Windows：File>Settings>Plugins)。

選擇Browse repositories…浆熔，選擇 flutter 插件并點(diǎn)擊?install本辐。

重啟Android Studio后插件生效。

接下來(lái)医增，讓我們用Android Studio創(chuàng)建一個(gè)Flutter項(xiàng)目慎皱，然后運(yùn)行它，并體驗(yàn)“熱重載”叶骨。

2）創(chuàng)建Flutter應(yīng)用

選擇File>New Flutter Project?茫多。

選擇Flutter application?作為 project 類型, 然后點(diǎn)擊 Next。

輸入項(xiàng)目名稱(如?myapp)忽刽，然后點(diǎn)擊 Next天揖。

點(diǎn)擊Finish。

等待Android Studio安裝SDK并創(chuàng)建項(xiàng)目跪帝。

上述命令創(chuàng)建一個(gè)Flutter項(xiàng)目今膊，項(xiàng)目名為myapp，其中包含一個(gè)使用Material 組件?(opens new window)的簡(jiǎn)單演示應(yīng)用程序歉甚。

在項(xiàng)目目錄中万细，您應(yīng)用程序的代碼位于lib/main.dart扑眉。

3）運(yùn)行應(yīng)用程序

定位到Android Studio工具欄纸泄，如圖1-2所示：

在target selector?中, 選擇一個(gè)運(yùn)行該應(yīng)用的Android設(shè)備。如果沒(méi)有列出可用腰素，請(qǐng)選擇?Tools>Android>AVD Manager?并在那里創(chuàng)建一個(gè)聘裁。

在工具欄中點(diǎn)擊Run圖標(biāo)。

如果一切正常, 您應(yīng)該在您的設(shè)備或模擬器上會(huì)看到啟動(dòng)的應(yīng)用程序弓千，如圖1-3：

4）體驗(yàn)熱重載

Flutter 可以通過(guò)?熱重載（hot reload）?實(shí)現(xiàn)快速的開(kāi)發(fā)周期衡便，熱重載就是無(wú)需重啟應(yīng)用程序就能實(shí)時(shí)加載修改后的代碼，并且不會(huì)丟失狀態(tài)洋访。簡(jiǎn)單的對(duì)代碼進(jìn)行更改镣陕，然后告訴IDE或命令行工具你需要重新加載（點(diǎn)擊reload按鈕），你就會(huì)在你的設(shè)備或模擬器上看到更改姻政。

打開(kāi)lib/main.dart文件

將字符串'You have pushed the button this many times:'?更改為?'You have clicked the button this many times:'

不要按“停止”按鈕; 讓您的應(yīng)用繼續(xù)運(yùn)行.

要查更改呆抑，請(qǐng)調(diào)用Save?(cmd-s?/?ctrl-s)，或者點(diǎn)擊?熱重載按鈕?(帶有閃電??圖標(biāo)的按鈕)汁展。

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

2. VS Code的配置與使用

VS Code是一個(gè)輕量級(jí)編輯器厌殉，支持Flutter運(yùn)行和調(diào)試。

1）安裝flutter插件

啟動(dòng)VS Code侈咕。

調(diào)用View>Command Palette…公罕。

輸入‘install’, 然后選擇?Extensions: Install Extension?action。

在搜索框輸入flutter?耀销，在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點(diǎn)擊?Install楼眷。

選擇‘OK’ 重新啟動(dòng) VS Code。

驗(yàn)證配置

調(diào)用View>Command Palette…

輸入‘doctor’, 然后選擇?‘Flutter: Run Flutter Doctor’?action熊尉。

查看“OUTPUT”窗口中的輸出是否有問(wèn)題

2）創(chuàng)建Flutter應(yīng)用

啟動(dòng)VS Code

調(diào)用View>Command Palette…

輸入‘flutter’, 然后選擇?‘Flutter: New Project’?action

輸入Project 名稱 (如myapp), 然后按回車鍵

指定放置項(xiàng)目的位置摩桶，然后按藍(lán)色的確定按鈕

等待項(xiàng)目創(chuàng)建繼續(xù)，并顯示main.dart文件

3）體驗(yàn)熱重載

打開(kāi)lib/main.dart文件帽揪。

將字符串'You have pushed the button this many times:'?更改為?'You have clicked the button this many times:'硝清。

不要按“停止”按鈕; 讓您的應(yīng)用繼續(xù)運(yùn)行。

要查看您的更改转晰，請(qǐng)調(diào)用Save?(cmd-s?/?ctrl-s), 或者點(diǎn)擊?熱重載按鈕?(綠色圓形箭頭按鈕)芦拿。

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

?連接設(shè)備運(yùn)行Flutter應(yīng)用

Window下只支持為Android設(shè)備構(gòu)建并運(yùn)行Flutter應(yīng)用查邢，而macOS同時(shí)支持iOS和Android設(shè)備蔗崎。下面分別介紹如何連接Android和iOS設(shè)備來(lái)運(yùn)行flutter應(yīng)用。

1. 連接Android模擬器

要準(zhǔn)備在Android模擬器上運(yùn)行并測(cè)試Flutter應(yīng)用扰藕，請(qǐng)按照以下步驟操作：

啟動(dòng)Android Studio>Tools>Android>AVD Manager?并選擇?Create Virtual Device.

選擇一個(gè)設(shè)備并選擇Next缓苛。

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

在“Emulated Performance”下, 選擇?Hardware - GLES 2.0?以啟用?硬件加速?(opens new window).

驗(yàn)證AVD配置是否正確邓深，然后選擇?Finish未桥。

有關(guān)上述步驟的詳細(xì)信息，請(qǐng)參閱Managing AVDs?(opens new window).

在“Android Virtual Device Manager”中芥备，點(diǎn)擊工具欄的?Run冬耿。模擬器啟動(dòng)并顯示所選操作系統(tǒng)版本或設(shè)備的啟動(dòng)畫(huà)面。

運(yùn)行flutter run?啟動(dòng)您的設(shè)備萌壳。 連接的設(shè)備名是?Android SDK built for 亦镶，其中?platform?是芯片系列，如 x86袱瓮。

2. 連接Android真機(jī)設(shè)備

要準(zhǔn)備在Android設(shè)備上運(yùn)行并測(cè)試Flutter應(yīng)用缤骨，需要Android 4.1（API level 16）或更高版本的Android設(shè)備.

在Android設(shè)備上啟用?開(kāi)發(fā)人員選項(xiàng)?和?USB調(diào)試?。詳細(xì)說(shuō)明可在Android文檔?(opens new window)中找到尺借。

使用USB將手機(jī)插入電腦绊起。如果設(shè)備出現(xiàn)調(diào)試授權(quán)提示，請(qǐng)授權(quán)你的電腦可以訪問(wèn)該設(shè)備褐望。

在命令行運(yùn)行flutter devices?命令以驗(yàn)證Flutter識(shí)別您連接的Android設(shè)備勒庄。

運(yùn)行啟動(dòng)你應(yīng)用程序flutter run串前。

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

常見(jiàn)配置問(wèn)題

1. Android Studio問(wèn)題

1）缺少依賴庫(kù)問(wèn)題

上手安卓最常遇見(jiàn)的問(wèn)題之一局装，錯(cuò)誤如圖1-7所示坛吁，此時(shí)點(diǎn)擊超鏈接即可自動(dòng)跳轉(zhuǎn)到安裝頁(yè)面

網(wǎng)絡(luò)異常取消重新上傳

安裝之后重新運(yùn)行即可，如圖1-8：

2）連接不上Android Repository

這也是最常見(jiàn)的問(wèn)題之一铐尚，當(dāng)你發(fā)現(xiàn)自己無(wú)法下載部分依賴的時(shí)候拨脉，請(qǐng)優(yōu)先考慮這種情況。進(jìn)入File?->?Settings?->?Appearance & Behavior?->?System Settings?->?Android SDK?->?SDK Update Sites列表宣增，可以看到此時(shí)的?Android Repository?無(wú)法連接玫膀，如圖1-9所示：

這是由于要去Google下載Android SDK，但在國(guó)內(nèi)目前無(wú)法訪問(wèn)Google所致爹脾，因此帖旨，我們可以配置代理或使用vpn。

3）安卓包配置問(wèn)題

一般格式為

Could not HEAD **

Could not Get **

如：Android Studio Could not GET gradle-3.2.0.pom

這一類問(wèn)題是由于無(wú)法連接到Maven 庫(kù)造成的灵妨，解決方法如下：

進(jìn)入當(dāng)前所在項(xiàng)目名/android

打開(kāi)build.gradle

找到下面這一部分解阅，并加上maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }

allprojects{repositories{google()jcenter()maven{url'http://maven.aliyun.com/nexus/content/groups/public/'}//添加這一句}}

進(jìn)入File/ Settings/ Build, Execution, Deployment/ BuildTools/ Gradle/ Android Studio 中，勾選上 Enable embedded Maven repository 泌霍，重啟 Android Studio 即可解決货抄。

**注意：**存在這樣的一種情況，當(dāng)你根據(jù)上述步驟設(shè)置了之后朱转，依舊無(wú)法解決這個(gè)問(wèn)題蟹地，并有類似于?Could not HEAD maven.aliyun.com?的報(bào)錯(cuò)信息，請(qǐng)檢查?C:\Users\{user_name}\.gradle\gradle.properties?是否有設(shè)置代理肋拔。刪除后問(wèn)題即可解決锈津。

4）Hot Reload 熱重載失效問(wèn)題

在給Terminal?之類的終端模擬器設(shè)置代理之后呀酸，會(huì)導(dǎo)致“Hot Reload”重載失效凉蜂，此時(shí)調(diào)用?Save?(cmd-s?/?ctrl-s)將不會(huì)進(jìn)行熱重載，熱重載按鈕?(帶有閃電??圖標(biāo)的按鈕)也不會(huì)顯示性誉，將代理移除即可解決窿吩。

另外，有些情況下熱重載是不生效的错览，比如修改了main函數(shù)纫雁、修改了全局靜態(tài)方法等，讀者可以認(rèn)為“Hot Reload”只會(huì)重新構(gòu)建整個(gè)widget樹(shù)倾哺，如果變動(dòng)不在構(gòu)建widget樹(shù)的過(guò)程中轧邪，“Hot Reload”就不會(huì)起作用刽脖，這時(shí)直接重啟 App 就行