??這是一篇菜鳥萌新初次上手Flutter的實(shí)踐過程記錄亭饵,老鳥請(qǐng)自行略過哈~最近大家都在說Flutter溃列,還不是因?yàn)镚oogle爸爸剛剛發(fā)布了Flutter 1.0 版本例证,簡(jiǎn)單了解了下咬荷,類似于微信小程序等等的一種跨平臺(tái)解決方案冠句,操作流暢度據(jù)說不管是iOS,還是Android幸乒,都可以“如絲般順滑”懦底,這么膩害?趕緊入坑看一看~
Flutter簡(jiǎn)介
??簡(jiǎn)介啥的自己查一查看看就好罕扎,不過這一篇還是比較好的聚唐,傳送門:Flutter - 不一樣的跨平臺(tái)解決方案 。老實(shí)說這篇實(shí)踐就是根據(jù)它來的壳影,哈哈哈哈拱层,感謝大佬!
Flutter安裝配置
??本文介紹的是在Windows10系統(tǒng)上AndroidStudio中安裝配置Flutter的方法和步驟宴咧,其他系統(tǒng)環(huán)境歡迎查看參考文獻(xiàn)1.
??Flutter中文網(wǎng)是個(gè)不錯(cuò)的網(wǎng)站根灯,居然有中文文檔不錯(cuò)不錯(cuò),自學(xué)能力不錯(cuò)的可以自己搗鼓掺栅。首先烙肺,要添加環(huán)境變量到自己的用戶環(huán)境變量中。國(guó)內(nèi)訪問Flutter有時(shí)可能會(huì)受到限制(會(huì)科學(xué)上網(wǎng)的可自行忽略)氧卧,F(xiàn)lutter官方就為中國(guó)開發(fā)者搭建了臨時(shí)鏡像下載window版本的Flutter資源文件桃笙,大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
??這個(gè)是Linux系統(tǒng)的命令,在windows系統(tǒng)中也很簡(jiǎn)單沙绝,就是配置環(huán)境變量:
注意:這鏡像還只是臨時(shí)的搏明,萬一哪天和組織聯(lián)系不上了,還有組織留下的線索——Using Flutter in China闪檬。
上面環(huán)境變量設(shè)置完之后就可以開始下載Flutter安裝包了星著。
Using Flutter in China這個(gè)網(wǎng)址不僅有官方下載原地址,還有鏡像下載地址:
Original URL:
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip
Mirrored URL:
https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip
我是用鏡像地址下載的粗悯,速度很快虚循,親試有效。
不僅如此样傍,這個(gè)網(wǎng)址還提供了上海交通大學(xué)的鏡像地址横缔,如果之前設(shè)置的地址不能訪問,可以設(shè)置這個(gè)地址衫哥,設(shè)置方法和之前環(huán)境配置一樣:
FLUTTER_STORAGE_BASE_URL
: https://mirrors.sjtug.sjtu.edu.cn/PUB_HOSTED_URL
: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/??將Flutter下載完成之后茎刚,將其解壓放在權(quán)限較低的文件目錄中,不建議放在X:/Program Files目錄下撤逢,建議放在別的目錄中:
??然后進(jìn)入目錄中斗蒋,雙擊打開 flutter-console.bat 捌斧,進(jìn)入Flutter命令行窗口:
圖中可以看出怎樣在cmd中直接運(yùn)用flutter的命令,無非就是將flutter的路徑添加到系統(tǒng)環(huán)境變量中泉沾。
??輸入命令檢查Flutter安裝情況:
flutter doctor
出現(xiàn)XX或者!的地方都是有問題的妇押,比如說我這里有4個(gè)問題:
- Some Android licenses not accepted
- Flutter plugin not installed
- Dart plugin not installed
- No devices available
第一個(gè)問題跷究,只需要如圖中所示執(zhí)行下面命令,然后一路輸入“y”同意即可:
flutter doctor --android-licenses
在這里我遇到了一個(gè)問題敲霍,提醒說
A newer version of the Android SDK is required. To update, run:
/Users/iOSCMB/AndroidStudio/SDK/tools/bin/sdkmanager --update
但是當(dāng)我在命令行中執(zhí)行這個(gè)命令的時(shí)候俊马,又報(bào)錯(cuò)。報(bào)錯(cuò)信息是:
Warning:An error occurred during installation:Failed to move away or delete existing target file: D:\User\XXX\Android\SDK\tools
Move it away manually and try again..
千萬不要按照它所說的把這個(gè)目錄給刪除肩杈,這是沒有給Android SDK授權(quán)的原因柴我,我們可以在命令后加 -v
來查看更詳細(xì)的報(bào)錯(cuò)信息:
sdkmanager --update -v
根據(jù)它所說的,先給它授權(quán)扩然,執(zhí)行下面的命令:
sdkmanager --licenses
然后一路授權(quán)就可以了艘儒。
接下來的兩個(gè)問題就要在AndroidStudio中解決了。
AndroidStudio安裝Flutter和Dart插件
??在安裝這兩個(gè)插件之前夫偶,確保自己的AndroidStudio版本在3.1以上界睁,我自己用的是3.2.1的版本,打開File—Settings—Plugins兵拢,在搜索框中搜索Flutter翻斟,點(diǎn)擊install進(jìn)行安裝,Dart插件會(huì)一并進(jìn)行下載安裝说铃。如果無法下載访惜,可以將File->Settings->Apparence & Behavior->System Settings->Updates->use secure connnection 勾去掉,我就出現(xiàn)了這個(gè)問題腻扇,去掉之后就可以下載插件了债热。
??都安裝之后重啟IDE,就可以發(fā)現(xiàn)New下面多了創(chuàng)建Flutter Project入口:
這就說明安裝成功衙解,然后連接手機(jī)阳柔,打開USB調(diào)試,再輸入flutter doctor進(jìn)行檢測(cè)蚓峦,就會(huì)發(fā)現(xiàn)沒有問題了舌剂。
Flutter Hello World
??建議編寫Flutter程序在AndroidStudio工具上進(jìn)行,與Android開發(fā)類似暑椰,支持?jǐn)帱c(diǎn)調(diào)試等霍转。在用AS正式開始之前要配置一下Flutter的SDK,如圖所示:
上述完成之后一汽,就可以正式開始了避消。新建一個(gè)Flutter Project時(shí)低滩,有四種方式:Flutter Application、Flutter Plugin岩喷、Flutter Package恕沫、Flutter Module
這里直接選擇默認(rèn)第一個(gè)Flutter Application就行,進(jìn)去之后大概就是這個(gè)樣子:
??這里有一定的概率會(huì)卡死在創(chuàng)建項(xiàng)目的界面纱意,可以喚起資源管理器強(qiáng)制停止婶溯,然后再重新從創(chuàng)建好的flutter項(xiàng)目中打開,根據(jù)指引 run 一下dart的資源就可以了偷霉。
注意:連接真機(jī)后部署迄委,可能會(huì)部署很長(zhǎng)一段時(shí)間,卡在 initializing gradle 很久类少,這是因?yàn)樗J(rèn)是要下載最新的Gradle版本的叙身,而不是科學(xué)上網(wǎng)的你...就需要等很久很久,如果你打開你的C:\Users\你的用戶名.gradle\wrapper\dists 就會(huì)發(fā)現(xiàn)多了存放最新Gradle版本的一個(gè)文件夾硫狞,比如我就多了“gradle-4.10.2-all”這個(gè)文件夾信轿,最簡(jiǎn)單的方法就是將這個(gè)新建Flutter項(xiàng)目所用的Gradle版本設(shè)置成已有的Gradle版本,這里我改成了已有的gradle-4.6的版本妓忍。當(dāng)然也可以用文獻(xiàn)4的方法進(jìn)行修改虏两。若是硬要使用最新的gradle版本也可以,文獻(xiàn)5親試有效世剖,這里不詳細(xì)說明了定罢,自行翻閱即可。
??OK旁瘫,到此就可以成功部署了祖凫,我感覺部署的時(shí)間還是有點(diǎn)長(zhǎng)的,不知是不是第一次編譯的原因酬凳。Enjoy Yourself 惠况!
參考文獻(xiàn)
1、Flutter - 不一樣的跨平臺(tái)解決方案
2宁仔、Using Flutter in China
3稠屠、android studio 無法下載插件
4、Flutter在Android Studio上的初啟動(dòng)
5翎苫、解決AndroidStudio下載gradle慢的問題