本文由 愛學(xué)園平臺 進(jìn)行聯(lián)合編輯整理輸出
原作者:愛學(xué)園——莫比烏斯環(huán)
雖說Flutter出現(xiàn)有一段時間了,但大家對它的了解卻不是很深,但直到2018谷歌開發(fā)者大會在上海的召開,它才真正進(jìn)入開發(fā)者的世界。Flutter的出現(xiàn)為跨平臺開發(fā)開辟了新的方向,但是與之相應(yīng)的中文學(xué)習(xí)文檔卻不是很多,因此針對這一考慮我們會持續(xù)輸出一系列Flutter方面的實踐性學(xué)習(xí)文檔以及配套demo供大家學(xué)習(xí)。萬里之行始于足下,下面我們就開始Flutter入坑的第一篇——Flutter開發(fā)環(huán)境搭建。
Flutter 安裝
關(guān)于Flutter的安裝,本文以 macOS 系統(tǒng)為例,就 macOS 系統(tǒng)下Flutter的安裝細(xì)節(jié)進(jìn)行說明。其它平臺(Windowns、Linux)可參考官方文檔安裝步驟。
自備梯子或使用國內(nèi)鏡像
做過開發(fā)的都曉得,國內(nèi)訪問Google是不行的,因此此處我們需要做一些前期配置,擁有梯子的可自行跳過。沒有梯子的同志也不用擔(dān)心,F(xiàn)lutter官方并不會放棄我們這么重要的用戶,他們專門為中國開發(fā)者搭建了臨時鏡像,大家可以將環(huán)境變量加入到當(dāng)前用戶環(huán)境中,具體操作如下:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
這里的配置僅限當(dāng)前窗口使用,如果需要永久使用請參考后面小節(jié)更新環(huán)境變量配置
注意:此鏡像為臨時鏡像,并不能保證一直可用,讀者可以關(guān)注Using Flutter in China以獲得有關(guān)鏡像服務(wù)器的最新動態(tài)。
獲取Flutter SDK
獲取 Flutter 有多種方式:
- 去Flutter官網(wǎng)下載穩(wěn)定可用的安裝包,轉(zhuǎn)到下載頁
- 第一種方式可能需要翻墻,也可直接從Github上Flutter項目下去下載安裝包,轉(zhuǎn)到下載頁。對應(yīng)指令
git clone -b dev https://github.com/flutter/flutter.git
(可針對當(dāng)前版本做命令的調(diào)整)
上述兩種第一種需要解壓,第二種不需要,總之將它們放置到您想放到的地方
更新環(huán)境變量
大家都知道此時flutter
還不是全局變量,為了方便我們以后的調(diào)用,這里我們需要做一些全局性的配置,具體命令如下:
export PATH= ~/developer/flutter/bin:$PATH //flutter 存放位置,替換為您自己的即可
export ANDROID_HOME="~/Library/Android/sdk" //android sdk目錄,替換為您自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
打開(或創(chuàng)建)~/.bash_profile文件,將下面的命令粘貼進(jìn)去,注意:此處Flutter與Android SDK的路徑需要替換為自己的,保存之后運(yùn)行source $~/.bash_profile
刷新當(dāng)前終端窗口。
運(yùn)行 flutter doctor
經(jīng)過上面的步驟,此時我們就可以運(yùn)行以下命令查看是否需要安裝其它依賴項來完成安裝,這個過程第一次可能需要耗費(fèi)一段時間,下次就會快很多:
flutter doctor
該命令依賴檢查您的環(huán)境并在終端窗口顯示報告。如下是我運(yùn)行輸出的結(jié)果:
運(yùn)行異常情況:
[-] Android toolchain - develop for Android devices
? Android SDK at /Users/obiwan/Library/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.
一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等,請按照提示解決。
運(yùn)行正常情況:
這里我們只關(guān)注紅色方框內(nèi)的,這里有四部分下面逐一解釋(Android,先不考慮IOS情況,處理一致):
- 第一部分監(jiān)測的是Flutter相關(guān)依賴項結(jié)果,如果第一次運(yùn)行會先去下載;
- 第二部分針對Android SDK和Java方面的檢測,如果缺失,對應(yīng)條目前方會顯示?紅色標(biāo)記,那就需要您根據(jù)缺失條目提示進(jìn)行配置,這里不做深入;
- 第三部分針對編譯器(Android Studio)內(nèi)部插件(Flutter、Dart)的安裝檢測,插件的安裝將會在下一章節(jié)詳細(xì)講解;
- 第四部分是對連接設(shè)備的檢測,我這里沒有啟動設(shè)備,則顯示無可用設(shè)備。
編譯器Flutter插件安裝
適合Flutter使用的編譯器有很多(IDE、VSCode、Xcode),這里我以Android Studio為例演示下如何安裝Flutter相關(guān)插件(注意:這里Android Studio需要 3.0或更高版本):
- 首先啟動Android Studio,打開插件首選項(Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux);
- 選擇 Browse repositories…, 選擇 Flutter 插件并點(diǎn)擊 install(此處Dart插件回一起安裝);
- 重啟Android Studio后插件生效;
體驗Flutter
經(jīng)過上面的步驟,F(xiàn)lutter需要的相關(guān)環(huán)境基本已經(jīng)配置完畢,下面我們就創(chuàng)建一個工程實踐下,我們的配置是否可行:
創(chuàng)建應(yīng)用
- 打開Android Studio 選擇File>New Flutter Project
- 選擇Flutter application作為project類型,然后點(diǎn)擊Next
- 輸入項目名稱(如myapp),然后點(diǎn)擊Next
- 點(diǎn)擊Finish
- 創(chuàng)建完成
下面請看默認(rèn)Flutter工程的目錄結(jié)構(gòu):
在項目目錄中,您應(yīng)用程序的代碼位于
lib/main.dart
.
運(yùn)行
點(diǎn)擊上述綠色三角執(zhí)行程序,您有可能遇到一些異常現(xiàn)象比如:dart not support 或 flutter not found sdk 等等,那么你就得查看下如下兩處地方是否配置正確:
開啟Dart支持:
Flutter SDK路徑配置:
然后再次運(yùn)行,即日志界面的執(zhí)行過程如下:
查看模擬器運(yùn)行結(jié)果--HelloWorld:
到此說明我們的開發(fā)環(huán)境安裝正確,但不代表您們也會這么順利,畢竟每個人都電腦環(huán)境不一致,如遇到問題可給我留言,我們一起探討,~謝謝~!
注釋:下一篇我們將會帶領(lǐng)您如何一步步創(chuàng)建我們第一個Flutter應(yīng)用與相關(guān)代碼結(jié)構(gòu)分析