1.1. 操作系統(tǒng)選擇
學(xué)習(xí)階段: Windows或者macOS(蘋果操作系統(tǒng))都是可以的
開發(fā)階段: 一般需要使用macOS洒敏,因?yàn)槲覀冃枰槍OS進(jìn)行調(diào)試拾弃,通常方便起見還是選擇macOS
1.2. 安裝Flutter SDK
配置鏡像
由于在國內(nèi)訪問Flutter有時(shí)可能會受到限制,F(xiàn)lutter官方為中國開發(fā)者搭建了臨時(shí)鏡像朱盐,大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中:
- macOS或者Linux系統(tǒng):
打開terminal, 先進(jìn)入用戶主目錄cd ~涝缝,然后使用命令行sudo vim ~/.bash_profile,編輯.bash_profile文件锚国,添加如下代碼:
然后使用命令行:source ~/.bash_profile腕巡,使其生效。export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- Windows
1.1 點(diǎn)擊計(jì)算機(jī)圖標(biāo) - 屬性 - 高級系統(tǒng)設(shè)置 - 高級 - 環(huán)境變量
1.2 新建變量:
PUB_HOSTED_URL血筑,其值為https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL绘沉, 其值為https://storage.flutter-io.cn
注意: 此鏡像為臨時(shí)鏡像,并不能保證一直可用豺总,讀者可以參考Flutter in China 以獲得有關(guān)鏡像服務(wù)器的最新動態(tài)车伞。
下載Flutter的SDK
來到Flutter的官網(wǎng)網(wǎng)站,選擇最新穩(wěn)定的Flutter SDK的版本
- 網(wǎng)站地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
- 選擇自己的操作系統(tǒng)和最新穩(wěn)定的版本(Stable版本)(我當(dāng)前最新穩(wěn)定的版本是1.12.13)
安裝Flutter
- 解壓下載好的Flutter SDK:
這個(gè)在Windows和macOS都是一樣的(選擇一個(gè)自己想要安裝的目錄)喻喳,但是在macOS中另玖,我通常會講flutter目錄拖入到應(yīng)用程序中,將其當(dāng)作我的一個(gè)應(yīng)用(個(gè)人習(xí)慣而已) - 配置Flutter和Dart的環(huán)境變量:
因?yàn)槲覀冎笮枰诿钚袌?zhí)行Flutter的命令表伦,所以需要配置環(huán)境變量- macOS或者Linux系統(tǒng):sudo vim ~/.bash_profile
然后使用命令行:source ~/.bash_profile谦去,使其生效。export FLUTTER_HOME=/Applications/flutter export PATH=$PATH:$FLUTTER_HOME/bin export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
- Windows
1.1 點(diǎn)擊計(jì)算機(jī)圖標(biāo) -> 屬性 -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 找到Path目錄(如果沒有蹦哼,創(chuàng)建一個(gè)新用戶變量 Pathh)鳄哭。
1.2 在Path中分別添加Flutter和Dart的bin目錄所在路勁。
1.3. 安裝 Xcode
要為iOS開發(fā)Flutter應(yīng)用程序纲熏,您需要Xcode 9.0或更高版本:
安裝Xcode 9.0或更新版本(通過鏈接下載或蘋果應(yīng)用商店).
- 直接在App Store上搜索Xcode妆丘,找到安裝即可
1.1 這種安裝方式有一個(gè)缺點(diǎn),安裝的一定是最新版本的(當(dāng)然是用最新版本的最好)
1.2 但是最新版本的Xcode會對macOS系統(tǒng)有一定的要求局劲,所以可能還要設(shè)計(jì)到系統(tǒng)升級
1.3 如果不希望系統(tǒng)升級勺拣,可以選擇第二種方式 - 第二種方式是安裝自己想要的Xcode的版本,需要手動去下載
2.1 進(jìn)入https://developer.apple.com/download/more[2]頁面
2.2 登錄自己的Apple ID
2.3 在搜索框輸入Xcode鱼填,回車搜索药有,找到各種版本Xcode下載即可 - 配置Xcode命令行工具以使用新安裝的Xcode版本
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
對于大多數(shù)情況,當(dāng)您想要使用最新版本的Xcode時(shí)苹丸,這是正確的路徑塑猖。如果您需要使用不同的版本,請指定相應(yīng)路徑谈跛。 - 確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令
sudo xcodebuild -license
同意過了.
使用Xcode羊苟,您可以在iOS設(shè)備或模擬器上運(yùn)行Flutter應(yīng)用程序。
1.4. 安裝Android Studio
如果想為Flutter配置Android開發(fā)環(huán)境感憾,需要在我們的電腦上安裝一個(gè)Android Studio
- Android Studio是基于IntelliJ IDEA的蜡励、Google 官方的 Android 應(yīng)用集成開發(fā)環(huán)境 (IDE)令花。
Android Studio的下載
官網(wǎng)地址:https://developer.android.com/studio/?utm_source=android-studio
直接在官方下載即可
安裝直接雙擊安裝即可
創(chuàng)建Android模擬器
Configure -> AVD Manger -> create virtual device -> 選擇想安裝的模擬器設(shè)備 -> 下載
注意:安裝Android Studio之前需先保證已安裝JDK1.8
升級 Flutter
Flutter SDK分支
Flutter SDK有多個(gè)分支,如beta凉倚、dev兼都、master、stable稽寒,其中stable分支為穩(wěn)定分支(日后有新的穩(wěn)定版本發(fā)布后可能也會有新的穩(wěn)定分支扮碧,如1.0.0),dev和master為開發(fā)分支杏糙,安裝flutter后慎王,你可以運(yùn)行flutter channel
查看所有分支,如筆者本地運(yùn)行后宏侍,結(jié)果如下:
Flutter channels:
beta
dev
* master
帶"*"號的分支即你本地的Flutter SDK 跟蹤的分支赖淤,要切換分支,可以使用flutter channel beta
或 flutter channel master
谅河,F(xiàn)lutter官方建議跟蹤穩(wěn)定分支咱旱,但你也可以跟蹤master
分支,這樣可以查看最新的變化绷耍,但這樣穩(wěn)定性要低的多吐限。
升級Flutter SDK和依賴包
要升級flutter sdk,只需一句命令:
flutter upgrade
該命令會同時(shí)更新Flutter SDK和你的flutter項(xiàng)目依賴包褂始。如果你只想更新項(xiàng)目依賴包(不包括Flutter SDK)诸典,可以使用如下命令:
-
flutter packages get
獲取項(xiàng)目所有的依賴包。 -
flutter packages upgrade
獲取項(xiàng)目所有依賴包的最新版本病袄。
1.3.2 IDE配置與使用
理論上可以使用任何文本編輯器與命令行工具來構(gòu)建Flutter應(yīng)用程序搂赋。 不過赘阀,F(xiàn)lutter官方建議使用Android Studio和VS Code之一以獲得更好的開發(fā)體驗(yàn)益缠。Flutter官方提供了這兩款編輯器插件,通過IDE和插件可獲得代碼補(bǔ)全基公、語法高亮幅慌、widget編輯輔助、運(yùn)行和調(diào)試支持等功能轰豆,可以幫助我們極大的提高開發(fā)效率胰伍。下面我們分別介紹一下Android Studio和VS Code的配置及使用(Android Studio和VS Code讀者可以在其官網(wǎng)獲得最新的安裝,由于安裝比較簡單酸休,故不再贅述)骂租。
Android Studio 配置與使用
由于Android Studio是基于IntelliJ IDEA開發(fā)的,所以讀者也可以使用IntelliJ IDEA斑司。
安裝Flutter和Dart插件
需要安裝兩個(gè)插件:
-
Flutter
插件: 支持Flutter開發(fā)工作流 (運(yùn)行渗饮、調(diào)試、熱重載等)。 -
Dart
插件: 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證互站、代碼補(bǔ)全等)私蕾。
安裝步驟:
- 啟動Android Studio。
- 打開插件首選項(xiàng) (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)胡桃。
- 選擇 Browse repositories…踩叭,選擇 flutter 插件并點(diǎn)擊
install
。 - 重啟Android Studio后插件生效翠胰。
接下來容贝,讓我們用Android Studio創(chuàng)建一個(gè)Flutter項(xiàng)目,然后運(yùn)行它亡容,并體驗(yàn)“熱重載”嗤疯。
創(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 組件的簡單演示應(yīng)用程序悔耘。
在項(xiàng)目目錄中,您應(yīng)用程序的代碼位于 lib/main.dart
我擂。
運(yùn)行應(yīng)用程序
-
定位到Android Studio工具欄衬以,如圖1-3所示:
在 target selector 中, 選擇一個(gè)運(yùn)行該應(yīng)用的Android設(shè)備。如果沒有列出可用校摩,請選擇 Tools>Android>AVD Manager 并在那里創(chuàng)建一個(gè)看峻。
在工具欄中點(diǎn)擊 Run圖標(biāo)。
-
如果一切正常, 您應(yīng)該在您的設(shè)備或模擬器上會看到啟動的應(yīng)用程序:
體驗(yàn)熱重載
Flutter 可以通過 熱重載(hot reload) 實(shí)現(xiàn)快速的開發(fā)周期衙吩,熱重載就是無需重啟應(yīng)用程序就能實(shí)時(shí)加載修改后的代碼互妓,并且不會丟失狀態(tài)。簡單的對代碼進(jìn)行更改坤塞,然后告訴IDE或命令行工具你需要重新加載(點(diǎn)擊reload按鈕)冯勉,你就會在你的設(shè)備或模擬器上看到更改。
打開
lib/main.dart
文件將字符串
'You have pushed the button this many times:'
更改為'You have clicked the button this many times:'
不要按“停止”按鈕; 讓您的應(yīng)用繼續(xù)運(yùn)行.
-
要查更改摹芙,請調(diào)用 Save (
cmd-s
/ctrl-s
)灼狰,或者點(diǎn)擊 熱重載按鈕 (帶有閃電??圖標(biāo)的按鈕)。你會立即在運(yùn)行的應(yīng)用程序中看到更新的字符串浮禾。
VS Code的配置與使用
VS Code是一個(gè)輕量級編輯器交胚,支持Flutter運(yùn)行和調(diào)試坛悉。
安裝flutter插件
- 啟動 VS Code。
- 調(diào)用 View>Command Palette…承绸。
- 輸入 ‘install’, 然后選擇 Extensions: Install Extension action裸影。
- 在搜索框輸入
flutter
,在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點(diǎn)擊 Install军熏。 - 選擇 ‘OK’ 重新啟動 VS Code轩猩。
- 驗(yàn)證配置
- 調(diào)用 View>Command Palette…
- 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action。
- 查看“OUTPUT”窗口中的輸出是否有問題
創(chuàng)建Flutter應(yī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文件
體驗(yàn)熱重載
- 打開
lib/main.dart
文件。 - 將字符串
'You have pushed the button this many times:'
更改為'You have clicked the button this many times:'
摩幔。 - 不要按“停止”按鈕; 讓您的應(yīng)用繼續(xù)運(yùn)行彤委。
- 要查看您的更改,請調(diào)用 Save (
cmd-s
/ctrl-s
), 或者點(diǎn)擊 熱重載按鈕 (綠色圓形箭頭按鈕)或衡。
你會立即在運(yùn)行的應(yīng)用程序中看到更新的字符串焦影。
1.3.3 連接設(shè)備運(yùn)行Flutter應(yīng)用
Window下只支持為Android設(shè)備構(gòu)建并運(yùn)行Flutter應(yīng)用,而macOS同時(shí)支持iOS和Android設(shè)備封断。下面分別介紹如何連接Android和iOS設(shè)備來運(yùn)行flutter應(yīng)用斯辰。
連接Android模擬器
要準(zhǔn)備在Android模擬器上運(yùn)行并測試Flutter應(yī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 以啟用 硬件加速.
-
驗(yàn)證AVD配置是否正確,然后選擇 Finish柄瑰。
有關(guān)上述步驟的詳細(xì)信息闸氮,請參閱 Managing AVDs.
在“Android Virtual Device Manager”中,點(diǎn)擊工具欄的 Run教沾。模擬器啟動并顯示所選操作系統(tǒng)版本或設(shè)備的啟動畫面蒲跨。
運(yùn)行
flutter run
啟動您的設(shè)備。 連接的設(shè)備名是Android SDK built for <platform>
详囤,其中 platform 是芯片系列财骨,如 x86镐作。
連接Android真機(jī)設(shè)備
要準(zhǔn)備在Android設(shè)備上運(yùn)行并測試Flutter應(yīng)用藏姐,需要Android 4.1(API level 16)或更高版本的Android設(shè)備.
- 在Android設(shè)備上啟用 開發(fā)人員選項(xiàng) 和 USB調(diào)試 。詳細(xì)說明可在Android文檔中找到该贾。
- 使用USB將手機(jī)插入電腦羔杨。如果設(shè)備出現(xiàn)調(diào)試授權(quán)提示,請授權(quán)你的電腦可以訪問該設(shè)備杨蛋。
- 在命令行運(yùn)行
flutter devices
命令以驗(yàn)證Flutter識別您連接的Android設(shè)備兜材。 - 運(yùn)行啟動你應(yīng)用程序
flutter run
理澎。
默認(rèn)情況下,F(xiàn)lutter使用的Android SDK版本是基于你的 adb
工具版本曙寡。 如果想讓Flutter使用不同版本的Android SDK糠爬,則必須將該 ANDROID_HOME
環(huán)境變量設(shè)置為相應(yīng)的SDK安裝目錄。
連接iOS模擬器
要準(zhǔn)備在iOS模擬器上運(yùn)行并測試Flutter應(yīng)用举庶,請按以下步驟操作:
-
在你的MAC上执隧,通過 Spotlight 或以下命令找到模擬器:
open -a Simulator
通過檢查模擬器 Hardware > Device 菜單中的設(shè)置,確保模擬器正在使用64位設(shè)備(iPhone 5s或更高版本)户侥。
根據(jù)你電腦屏幕大小镀琉,模擬高清屏iOS設(shè)備可能會溢出屏幕∪锾疲可以在模擬器的 Window> Scale 菜單下設(shè)置設(shè)備比例屋摔。
運(yùn)行
flutter run
啟動flutter應(yīng)用程序。
連接iOS真機(jī)設(shè)備
要將Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備替梨,需要一些額外的工具和一個(gè)Apple帳戶钓试,還需要在Xcode中進(jìn)行一些設(shè)置。
安裝 homebrew (如果已經(jīng)安裝了brew,跳過此步驟)副瀑。
-
打開終端并運(yùn)行如下這些命令:
brew update brew install --HEAD libimobiledevice brew install ideviceinstaller ios-deploy cocoapods pod setup
如果這些命令中的任何一個(gè)失敗并出現(xiàn)錯(cuò)誤亚侠,請運(yùn)行brew doctor并按照說明解決問題.
-
遵循Xcode簽名流程來配置您的項(xiàng)目:
在你Flutter項(xiàng)目目錄中通過
open ios/Runner.xcworkspace
打開默認(rèn)的Xcode workspace.在Xcode中,選擇導(dǎo)航面板左側(cè)中的
Runner
項(xiàng)目俗扇。在
Runner
target設(shè)置頁面中硝烂,確保在 General > Signing > Team 下選擇了你的開發(fā)團(tuán)隊(duì)。當(dāng)你選擇一個(gè)團(tuán)隊(duì)時(shí)铜幽,Xcode會創(chuàng)建并下載開發(fā)證書滞谢,向你的設(shè)備注冊你的帳戶,并創(chuàng)建和下載配置文件(如果需要)除抛。-
要開始您的第一個(gè)iOS開發(fā)項(xiàng)目狮杨,您可能需要使用您的Apple ID登錄Xcode,如圖1-5:
任何Apple ID都支持開發(fā)和測試到忽,但若想將應(yīng)用分發(fā)到App Store橄教,就必須注冊Apple開發(fā)者計(jì)劃,有關(guān)詳情讀者可以自行了解喘漏。
-
當(dāng)您第一次attach真機(jī)設(shè)備進(jìn)行iOS開發(fā)時(shí)护蝶,需要同時(shí)信任你的Mac和該設(shè)備上的開發(fā)證書。首次將iOS設(shè)備連接到Mac時(shí)翩迈,請?jiān)趯υ捒蛑羞x擇
Trust
持灰。然后,轉(zhuǎn)到iOS設(shè)備上的設(shè)置菜單负饲,選擇 常規(guī)>設(shè)備管理 并信任您的證書堤魁。
-
如果Xcode中的自動簽名失敗喂链,請驗(yàn)證項(xiàng)目的 General > Identity > Bundle Identifier 值是否唯一,如圖1-7所示:
運(yùn)行
flutter run
啟動flutter應(yīng)用程序妥泉。
1.3.4 常見配置問題
Android Studio問題
缺少依賴庫問題
上手安卓最常遇見的問題之一椭微,錯(cuò)誤如圖1-8所示,此時(shí)點(diǎn)擊超鏈接即可自動跳轉(zhuǎn)到安裝頁面
安裝之后重新運(yùn)行即可盲链,如圖1-9:
連接不上Android Repository
這也是最常見的問題之一赏表,當(dāng)你發(fā)現(xiàn)自己無法下載部分依賴的時(shí)候,請優(yōu)先考慮這種情況匈仗。進(jìn)入 File
-> Settings
-> Appearance & Behavior
-> System Settings
-> Android SDK
-> SDK Update Sites
列表瓢剿,可以看到此時(shí)的 Android Repository
無法連接,如圖1-10所示:
這是由于要去Google下載Android SDK悠轩,但在國內(nèi)目前無法訪問Google所致间狂,因此,我們可以配置代理或使用vpn火架。
安卓包配置問題
一般格式為
Could not HEAD **
Could not Get **
如:Android Studio Could not GET gradle-3.2.0.pom
這一類問題是由于無法連接到 Maven 庫造成的鉴象,解決方法如下:
進(jìn)入
當(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/' } //添加這一句 } }
-
進(jìn)入 File/ Settings/ Build, Execution, Deployment/ BuildTools/ Gradle/ Android Studio 中何鸡,勾選上 Enable embedded Maven repository 纺弊,重啟 Android Studio 即可解決。
注意:存在這樣的一種情況骡男,當(dāng)你根據(jù)上述步驟設(shè)置了之后淆游,依舊無法解決這個(gè)問題,并有類似于
Could not HEAD maven.aliyun.com
的報(bào)錯(cuò)信息隔盛,請檢查C:\Users\{user_name}\.gradle\gradle.properties
是否有設(shè)置代理犹菱。刪除后問題即可解決。