今年接觸到了Flutter，看了官網(wǎng)的介紹，感覺還是很有吸引力的，原生性能，兼容iOS和Android并且作為Fuchsia默認(rèn)的開發(fā)框架，熱加載（hotReload）極大的提供了開發(fā)效率，豐富的UI控件（包括Material和Cupertino兩種風(fēng)格)，但唯一可惜的是正式版還未發(fā)布，不過flutter的活躍度還是很高的，相信很快正式版就會(huì)到來(lái)。為了體驗(yàn)一把Flutter，就做了一個(gè)小Demo。
傳送門：flutter_gank
先附上幾張截圖
沒有設(shè)計(jì)，自己怎么想怎么弄的，調(diào)用了干活集中營(yíng)的api，這個(gè)號(hào)稱客戶端最多的網(wǎng)站，由于已經(jīng)過了兩個(gè)多月才來(lái)寫這篇博客，由于flutter的更新，現(xiàn)在最新的是6.0dev版本，可能會(huì)影響部分功能的使用，但應(yīng)該不會(huì)有很大的改動(dòng)，我就開發(fā)的過程談?wù)?，flutter的一些優(yōu)缺點(diǎn)。
如果有面向?qū)ο蟮木幊探?jīng)驗(yàn)，入門還是很簡(jiǎn)單的，并且，官網(wǎng)也很細(xì)心的為我們講解了一些概念，因?yàn)槲沂亲鯽ndroid的我看得比較多的是這一篇flutter-for-android,還有針對(duì)于iOS devs，React Native devs，Xamarin.Forms devs，可以看出google的野心不小，不過我認(rèn)為Flutter會(huì)降低移動(dòng)端的開發(fā)成本，F(xiàn)lutter UI相比android原生更細(xì)膩一些，還原度會(huì)更高一些，畢竟做過android開發(fā)就知道碎片化的問題有多麻煩。
step by step
環(huán)境安裝
文檔：https://flutter.io/get-started/install/，按照步驟一步步基本就沒什么問題了，但需要注意的是有一行小字Note: If you’re in China, please read this wiki article first. 我自己安裝過程還是挺順利的，這里不做過多描述。
Flutter Gallery編譯
由于目前資料比較少，F(xiàn)lutter Gallery在Flutter工程目錄下，可以說是比較齊全的資料，雖然有文檔，哪有一個(gè)Demo來(lái)的爽，直接看效果，事半功倍。我在這個(gè)過程還是花費(fèi)了一番功夫，整個(gè)過程不是很順利，只是因?yàn)镕lutter版本不匹配，這里我就說一個(gè)較快的方法
- 下載Flutter 這里下載最新版本https://flutter.io/sdk-archive
- 解壓Flutter到你的電腦，xxxx\flutter_windows_v0.x.x-dev\flutter\bin 配置到環(huán)境變量，這樣就可以在任何地方使用flutter命令了
- 找到xx\flutter_windows_v0.x.x-dev\flutter\examples\flutter_gallery，這里包含了Flutter Gallery的源代碼
- 直接運(yùn)行 flutter build apk 命令，在xx\build\app\outputs\apk\release目錄下可以找到編譯好的apk
-
發(fā)送到android手機(jī)或者模擬器就可以看到運(yùn)行好的Demo
整個(gè)過程在命令行完成的，當(dāng)前編譯版本截圖：
image.png
因?yàn)橥荒夸浵碌腇lutter Gallery版本是匹配的，所以比較順利，我最開始是從github上直接下載master的源碼，所以遇到了很多問題。
Flutter Gallery apk下載: https://fir.im/ts78
開發(fā)工具
官網(wǎng)上提供了兩種編輯器的插件Android Studio 和VS Code，這里我還是選擇比較熟悉的Android Studio，安裝插件的方式也很簡(jiǎn)單，https://flutter.io/get-started/editor/，和安裝一般的插件是一樣的，安裝完成后重啟，就能找打，新建flutter 工程的選項(xiàng)
工程新建完成后，一個(gè)基礎(chǔ)的工程就出來(lái)了，第一次新建工程有點(diǎn)慢，一次就成功了，直接運(yùn)行到模擬器就ok了。
開發(fā)階段
新建完成的Flutter工程包含了一些目錄，其中比較顯眼的就是android 和ios目錄，但實(shí)際上我沒在這兩個(gè)目錄下寫代碼（以后肯定會(huì)寫），其實(shí)只要看了一些Demo大致就曉得，幾乎所有的代碼都在lib下面，依賴管理通過 pubspec.yaml，我并不想講太多關(guān)于代碼的事情，因?yàn)槲以谇懊婢幾g好了一個(gè)Demo（Flutter Gallery）我寫代碼的時(shí)候基本上是照葫蘆畫瓢，文檔和Demo都有，那就慢慢研究吧，沒有捷徑可走。
Flutter的優(yōu)點(diǎn)
在開頭的時(shí)候我介紹了一些，但都是比較官方的，下面是結(jié)合自己的開發(fā)體驗(yàn)
- 編譯很快，hotReload果然名不虛傳
- 擴(kuò)展性很強(qiáng)，一切皆widget，可以輕松實(shí)現(xiàn)一些復(fù)雜的效果
- 動(dòng)畫很贊，Hero動(dòng)畫可以很輕松的實(shí)現(xiàn)過度動(dòng)畫，其他動(dòng)畫api也非常靈活可配置
- 換主題很贊，可快速全局切換主題
- 調(diào)試模式很贊，F(xiàn)lutter Gallery就可以進(jìn)行性能分析，slow motion（慢動(dòng)作）等等，
Flutter的缺點(diǎn)
Flutter還處于Beta版本，肯定是有些原因的
- 開源庫(kù)太少，盡管https://pub.dartlang.org/已經(jīng)提供了大量的插件，但相對(duì)于其他語(yǔ)言來(lái)說，遠(yuǎn)遠(yuǎn)不夠，資料還是太少了
- 一些控件在debug模式和release模式下表現(xiàn)有些細(xì)微的差異
- json解析太麻煩，因?yàn)榱?xí)慣了使用GsonFormat之類的插件，不過這應(yīng)該不是太大的問題，有時(shí)間，也可以嘗試著寫一個(gè)
- gif循環(huán)播放造成的oom問題，我查閱了issue，好像是skia圖像引擎的問題，其實(shí)加載大量圖片也容易出現(xiàn)oom，沒有出現(xiàn)像Picasso和Glide之類的圖像框架
以上僅僅是在開發(fā)的過程中碰到的
Flutter_Gank 項(xiàng)目介紹
終于說了一點(diǎn)和標(biāo)題相關(guān)的了，不然有人要說我標(biāo)題黨了，其實(shí)做完之后感覺也沒什么特色，就列一些用到了哪些知識(shí)點(diǎn)吧
- 網(wǎng)絡(luò)請(qǐng)求插件：https://github.com/flutterchina/dio
- 圖片加載插件：https://github.com/renefloor/flutter_cached_network_image
- 瀑布流插件：https://github.com/letsar/flutter_staggered_grid_view
- 共享參數(shù)插件：https://github.com/flutter/plugins/tree/master/packages/shared_preferences
- 網(wǎng)絡(luò)狀態(tài)插件：https://github.com/flutter/plugins/tree/master/packages/connectivity
- 跳轉(zhuǎn)外部瀏覽器插件：https://github.com/flutter/plugins/tree/master/packages/url_launcher
還有一些基礎(chǔ)控件ListView，TabBar，TabBarView，Button，Text，TextField，SnakeBar……的使用
開過過程中還遇到了一些小坑，比如，
- 側(cè)滑抽屜Drawer可以通過 _globalKey.currentState.openDrawer()打開卻沒有提供Close，或者Hide之類的方法關(guān)閉，需要通過Navigator.pop(context)來(lái)隱藏菜單 。
- 做雙擊退出的時(shí)候調(diào)用Navigator.pop(context)會(huì)出現(xiàn)黑屏，需要調(diào)用SystemNavigator.pop()才能完全退出。
傳送門：flutter_gank
更多學(xué)習(xí)資料
- https://flutter.io
- https://flutterchina.club/
- https://pub.dartlang.org
- https://github.com/dongjunkun?language=dart&tab=stars
如果覺得我的文章對(duì)你有幫助，留下一點(diǎn)痕跡唄，star一下就是對(duì)我最好的鼓勵(lì)
如需轉(zhuǎn)載，請(qǐng)自便，留下署名和原文鏈接即可
