工欲善其事必先利其器,本節(jié)首先會(huì)分別介紹一下在 Windows 和 macOS 下 Flutter SDK 的安裝,然后再介紹一下配 IDE 和模擬器的使用。
由于 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)最新的安裝教程安裝。
由于在國(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.io/community/china 以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。
要安裝并運(yùn)行 Flutter,您的開(kāi)發(fā)環(huán)境必須滿足以下最低要求:
如果已安裝Git for Windows,請(qǐng)確保可以在命令提示符或PowerShell中運(yùn)行 git 命令
注意,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 。
C:\src\flutter
;注意,不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\
)。flutter
文件下找到flutter_console.bat
,雙擊運(yùn)行并啟動(dòng)flutter命令行,接下來(lái),你就可以在Flutter命令行運(yùn)行flutter命令了。如果你想在 Windows 系統(tǒng)自帶命令行運(yùn)行flutter命令,需要添加以下環(huán)境變量到用戶PATH:
flutter\bin
的全路徑作為它的值.重啟Windows以應(yīng)用此更改.
在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.io/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)證是否安裝成功。
Flutter依賴于Android Studio的全量安裝。Android Studio不僅可以管理Android 平臺(tái)依賴、SDK版本等,而且它也是Flutter開(kāi)發(fā)推薦的IDE之一(當(dāng)然,你也可以使用其它編輯器或IDE,我們將會(huì)在后面討論)。
如果在安裝過(guò)程中遇到問(wèn)題,可以先去flutter官網(wǎng)查看一下安裝方式是否發(fā)生變化,或者在網(wǎng)上搜索一下解決方案。
在masOS下可以同時(shí)進(jìn)行Android和iOS設(shè)備的測(cè)試。
要安裝并運(yùn)行Flutter,您的開(kāi)發(fā)環(huán)境必須滿足以下最低要求:
bash、mkdir、rm、git、curl、unzip、which
注意,F(xiàn)lutter的渠道版本會(huì)不停變動(dòng),請(qǐng)以Flutter官網(wǎng)為準(zhǔn)。另外,在中國(guó)大陸地區(qū),要想正常獲取安裝包列表或下載安裝包,可能需要翻墻,讀者也可以去Flutter github項(xiàng)目下去下載安裝包,地址:github.com/flutter/flutter/releases 。
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
flutter
相關(guān)工具到path中: export PATH=`pwd`/flutter/bin:$PATH
此代碼只能暫時(shí)針對(duì)當(dāng)前命令行窗口設(shè)置PATH環(huán)境變量,要想永久將Flutter添加到PATH中請(qǐng)參考下面更新環(huán)境變量 部分。
這一步和Windows下步驟一致,不再贅述。
將Flutter添加到PATH中,可以在任何終端會(huì)話中運(yùn)行flutter
命令。
對(duì)于所有終端會(huì)話永久修改此變量的步驟是和特定計(jì)算機(jī)系統(tǒng)相關(guān)的。通常,您會(huì)在打開(kāi)新窗口時(shí)將設(shè)置環(huán)境變量的命令添加到執(zhí)行的文件中。例如
$HOME/.bash_profile
。文件路徑和文件名可能在你的電腦上不同. export PATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH
例如筆者Flutter 安裝目錄是“~/code/flutter_dir”,那么代碼為:
export PATH=~/code/flutter_dir/flutter/bin:$PATH
source $HOME/.bash_profile
刷新當(dāng)前終端窗口。注意: 如果你使用終端是zsh,終端啟動(dòng)時(shí)
~/.bash_profile
將不會(huì)被加載,解決辦法就是修改~/.zshrc
,在其中添加:source ~/.bash_profile
echo $PATH
要為iOS開(kāi)發(fā)Flutter應(yīng)用程序,您需要Xcode 9.0或更高版本:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
對(duì)于大多數(shù)情況,當(dāng)您想要使用最新版本的Xcode時(shí),這是正確的路徑。如果您需要使用不同的版本,請(qǐng)指定相應(yīng)路徑。sudo xcodebuild -license
同意過(guò)了.使用Xcode,您可以在iOS設(shè)備或模擬器上運(yùn)行Flutter應(yīng)用程序。
和Window一樣,要在Android設(shè)備上構(gòu)建并運(yùn)行Flutter程序都需要先安裝Android Studio,讀者可以先自行下載并安裝Android Studio,在此不再贅述。
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)定性要低的多。
要升級(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)目所有依賴包的最新版本。理論上可以使用任何文本編輯器與命令行工具來(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)單,故不再贅述)。
由于Android Studio是基于IntelliJ IDEA開(kāi)發(fā)的,所以讀者也可以使用IntelliJ IDEA。
需要安裝兩個(gè)插件:
Flutter
插件: 支持Flutter開(kāi)發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等)。Dart
插件: 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等)。安裝步驟:
install
。接下來(lái),讓我們用Android Studio創(chuàng)建一個(gè)Flutter項(xiàng)目,然后運(yùn)行它,并體驗(yàn)“熱重載”。
myapp
),然后點(diǎn)擊 Next。上述命令創(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
。
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è)備或模擬器上看到更改。
lib/main.dart
文件'You have pushed the button this many times:'
更改為 'You have clicked the button this many times:'
cmd-s
/ ctrl-s
),或者點(diǎn)擊 熱重載按鈕 (帶有閃電??圖標(biāo)的按鈕)。你會(huì)立即在運(yùn)行的應(yīng)用程序中看到更新的字符串。
VS Code是一個(gè)輕量級(jí)編輯器,支持Flutter運(yùn)行和調(diào)試。
flutter
,在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點(diǎn)擊 Install。myapp
), 然后按回車鍵lib/main.dart
文件。'You have pushed the button this many times:'
更改為 'You have clicked the button this many times:'
。cmd-s
/ ctrl-s
), 或者點(diǎn)擊 熱重載按鈕 (綠色圓形箭頭按鈕)。你會(huì)立即在運(yùn)行的應(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)用。
要準(zhǔn)備在Android模擬器上運(yùn)行并測(cè)試Flutter應(yīng)用,請(qǐng)按照以下步驟操作:
有關(guān)上述步驟的詳細(xì)信息,請(qǐng)參閱 Managing AVDs (opens new window).
flutter run
啟動(dòng)您的設(shè)備。 連接的設(shè)備名是 Android SDK built for <platform>
,其中 platform 是芯片系列,如 x86。要準(zhǔn)備在Android設(shè)備上運(yùn)行并測(cè)試Flutter應(yīng)用,需要Android 4.1(API level 16)或更高版本的Android設(shè)備.
flutter devices
命令以驗(yàn)證Flutter識(shí)別您連接的Android設(shè)備。flutter run
。
默認(rèn)情況下,F(xiàn)lutter使用的Android SDK版本是基于你的 adb
工具版本。 如果想讓Flutter使用不同版本的Android SDK,則必須將該 ANDROID_HOME
環(huán)境變量設(shè)置為相應(yīng)的SDK安裝目錄。
要準(zhǔn)備在iOS模擬器上運(yùn)行并測(cè)試Flutter應(yīng)用,請(qǐng)按以下步驟操作:
open -a Simulator
flutter run
啟動(dòng)flutter應(yīng)用程序。要將Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備,需要一些額外的工具和一個(gè)Apple帳戶,還需要在Xcode中進(jìn)行一些設(shè)置。
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
如果這些命令中的任何一個(gè)失敗并出現(xiàn)錯(cuò)誤,請(qǐng)運(yùn)行brew doctor并按照說(shuō)明解決問(wèn)題.
open ios/Runner.xcworkspace
打開(kāi)默認(rèn)的Xcode workspace.Runner
項(xiàng)目。Runner
target設(shè)置頁(yè)面中,確保在 General > Signing > Team 下選擇了你的開(kāi)發(fā)團(tuán)隊(duì)。當(dāng)你選擇一個(gè)團(tuán)隊(duì)時(shí),Xcode會(huì)創(chuàng)建并下載開(kāi)發(fā)證書(shū),向你的設(shè)備注冊(cè)你的帳戶,并創(chuàng)建和下載配置文件(如果需要)。
任何Apple ID都支持開(kāi)發(fā)和測(cè)試,但若想將應(yīng)用分發(fā)到App Store,就必須注冊(cè)Apple開(kāi)發(fā)者計(jì)劃,有關(guān)詳情讀者可以自行了解。
Trust
。
然后,轉(zhuǎn)到iOS設(shè)備上的設(shè)置菜單,選擇 常規(guī)>設(shè)備管理 并信任您的證書(shū)。
flutter run
啟動(dòng)flutter應(yīng)用程序。上手安卓最常遇見(jiàn)的問(wèn)題之一,錯(cuò)誤如圖1-8所示,此時(shí)點(diǎn)擊超鏈接即可自動(dòng)跳轉(zhuǎn)到安裝頁(yè)面

安裝之后重新運(yùn)行即可,如圖1-9:
這也是最常見(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-10所示:
這是由于要去Google下載Android SDK,但在國(guó)內(nèi)目前無(wú)法訪問(wèn)Google所致,因此,我們可以配置代理或使用vpn。
一般格式為
Could not HEAD **
Could not Get **
如:Android Studio Could not GET gradle-3.2.0.pom
這一類問(wèn)題是由于無(wú)法連接到 Maven 庫(kù)造成的,解決方法如下:
當(dāng)前所在項(xiàng)目名/android
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/' } //添加這一句
}
}
注意:存在這樣的一種情況,當(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)題即可解決。
在給 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ì)起作用。
更多建議: