Flutter的開發(fā)思路非常"風(fēng)騷",不使用平臺原生控件,一切基于Widget.它會把所有的UI,數(shù)據(jù)等通過flutter的引擎和框架繪制成widget.
下圖所示:通過android開發(fā)者模式開啟邊界布局,我們可以清楚的看到,整個應(yīng)用的界面并沒有我們熟悉的布局邊界輔助線.(頂部的是手機(jī)狀態(tài)欄的,并非app的)
官方演示demo下載
show_1.gif
Flutter的特點(diǎn):
-
高性能的系統(tǒng)框架
由框架和引擎直接編譯成arm機(jī)器碼,界面通過widget進(jìn)行展示,不會出現(xiàn)原生UI控件的過度繪制的情況,在老舊手機(jī)上依然可以60幀的刷新頻率.不會出現(xiàn)性能問題. -
優(yōu)秀的開發(fā)體驗與開發(fā)效率
可以使用主流的IDE進(jìn)行開發(fā),使用dart語言,了解java,kotlin,python,等語言,上手dart非常容易.熱啟動,編輯修改代碼后,使用熱啟動,幾乎1秒內(nèi)就可以顯示在調(diào)試設(shè)備上,極大的提高了開發(fā)效率. -
美觀和可擴(kuò)展組件
flutter提供有大多數(shù) android 和 ios 的ui組件,可有輕松上手,也可以輕松的編輯擴(kuò)展自定義組件 -
同時支持android 與 ios
同一套代碼可以直接編譯生成android 和 ios兩個項目
看到以上這些優(yōu)點(diǎn),是不是有種心動的感覺
下面就開始我們的安裝吧!
1.下載flutter SDK并安裝
點(diǎn)擊跳轉(zhuǎn)下載
download_flutter.png
解壓之后,配置環(huán)境變量如(path =D:\android_Flutter\flutter_windows_v0.5.1-beta\flutter\bin)
打開cmd.exe,輸入命令 flutter doctor 安裝flutter
C:\Program Files (x86)\PowerCmd>flutter doctor可能會出現(xiàn)以下警告
image.png
第一個因為需要android許可認(rèn)證,直接執(zhí)行后面提示的命令即可
flutter doctor --android-licenses如果出現(xiàn)以下提示,依然按要求輸入命令
D:\micro_work\work\flutter_app>C:\Users\Administrator\AppData\Local\Android\sdk\tools\bin\sdkmanager --update以實際提示為主,如果遇到其他問題可以留言討論
A newer version of the Android SDK is required. To update, run://
C:\Users\Administrator\AppData\Local\Android\sdk\tools\bin\sdkmanager --update
第二個是因為android studio沒有安裝flutter插件,下一步會做演示
注意:android studio的版本要大于3.0
2.插件安裝與配置
打開settings ==>plugins搜索flutter和dart點(diǎn)擊下載,重啟android studio
配置dart SDK:打開settings搜索dart,進(jìn)入以下界面,配置dart-sdk
注意路徑是...flutter\bin\cache\dart-sdk
image.png
配置flutter SDK
image.png
至此flutter的環(huán)境就已經(jīng)配置完成了!
下面就開始創(chuàng)建的我們的第一個hello flutter 應(yīng)用吧
1.創(chuàng)建flutter 項目
image.png
選擇創(chuàng)建flutter application,設(shè)置項目路徑,包名一路下一步就ok了
第一次創(chuàng)建flutter項目會比較慢,耐心等待吧
...
...
...初始化完成!
可以看到一個示例界面的代碼,不用管是什么意思,有什么用,跑起來看看再說...
代開模擬器,點(diǎn)擊 run
報錯了看下面的有沒有解決的辦法!!!
image.png
成功運(yùn)行到模擬器上
點(diǎn)擊下圖的 熱重啟 ,可以看到,修改代碼后,構(gòu)建速度很快,不到1秒,就直接可以在模擬器上查看修改后的效果了
image.png
至此,flutter在windows系統(tǒng)的安裝,android studio 上配置flutter插件及環(huán)境,以及運(yùn)行第一個flutter應(yīng)用已經(jīng)搞定了.
可能遇到的問題
- 不建議使用Git直接fork Flutter_sdk到本地,因為速度比較慢,建議通過本文下載鏈接下載
- 確保android 開發(fā)環(huán)境ok,android studio升級到3.0以上,升級到最新的SDK build_tools
- 運(yùn)行時,出現(xiàn)
Unable to download needed Android SDK components, as the following licenses have not been accepted: Android SDK Platform 27, Android SDK Build-Tools 26.0.2
可能是應(yīng)為flutter默認(rèn)使用的android_sdk路徑與你配置的sdk路徑不相同的問題
打開項目下的android/local.properties,修改sdk.dir路徑與設(shè)置中的android sdk相同
image.png
image.png
