Flutter 終于正式來啦，現(xiàn)在都到 1.2 版了，雖然現(xiàn)在仍然有很多坑，很多問題，在 android 中嵌入 Flutter 還是不夠好，但是我們學(xué)習(xí) Flutter 的卻是時(shí)候了，不說你在公司 android 項(xiàng)目里有多少應(yīng)用，F(xiàn)lutter 的學(xué)習(xí)總是有必要的，先了解，熟悉，在可以的時(shí)候直接上了，F(xiàn)lutter 的未來不用擔(dān)心，你知道 Flutter 妥妥的就是未來就行了

這里我整理下找到的資料，放上些自己的理解，方便大家的學(xué)習(xí)，也方便自己查閱

Flutter 的原理很簡(jiǎn)單，?創(chuàng)建一張畫布，并在這張畫布上渲染界面。同時(shí)，監(jiān)聽原生事件，在 Dart 層響應(yīng)所有觸摸事件。這和跨平臺(tái)游戲引擎的原理是一致的。抽象出統(tǒng)一的界面、觸摸、交互語言，然后使用一致的渲染引擎呈現(xiàn)最終產(chǎn)物

官方網(wǎng)站：

• Flutter_中文社區(qū)
• Flutter_中文網(wǎng)
• Flutter_github

學(xué)習(xí)網(wǎng)站：

• fidev.io
• flutter.codelabs

簡(jiǎn)友教程：

蓋世英雄_64c4 | Q吹個(gè)大氣球Q | iwakevin
走路不穿鞋oO | TYL_CQ | 閑魚技術(shù) | 謝棟_ | guaju
阿策神奇 | 開心人 | 乘香墨影 | 戀貓?jiān)铝?/a> | Yuzo

Dart 教程

• 給Java開發(fā)者的Flutter開發(fā)基礎(chǔ)---Dart語言

Flutter 特性了解

• Flutter - 特性

Flutter 環(huán)境配置、軟件安裝、首次運(yùn)行

• Flutter - 配置，首次運(yùn)行

視頻教程

• Flutter基礎(chǔ)視頻教程

實(shí)戰(zhàn)項(xiàng)目

1. Flutter 天氣 app

   • Flutter實(shí)戰(zhàn)（一）寫一個(gè)天氣查詢的APP
   • Flutter實(shí)戰(zhàn)（二） 寫一個(gè)天氣查詢的APP
   • Flutter實(shí)戰(zhàn)（三）檢驗(yàn)Flutter的跨平臺(tái)能力

2. 上拉下拉

   • Flutter 實(shí)現(xiàn)上拉加載更多、下拉刷新

3. 阿里 Flutter-go

   • 阿里 Flutter-go 項(xiàng)目拆解筆記（一）
   • 阿里 Flutter-go 項(xiàng)目拆解筆記（二）
   • 阿里 Flutter-go 項(xiàng)目拆解筆記（三）
   • 阿里 Flutter-go 項(xiàng)目拆解筆記（四）
   • 阿里 Flutter-go 項(xiàng)目拆解筆記（五）
   • 阿里 Flutter-go 項(xiàng)目拆解筆記（六）

4. Flutter豆瓣客戶端

   • FlutterDouBan

5. Panda看書

   • flutter_books

Flutter 和 Android 相互集成

• Flutter 集成到 Android 項(xiàng)目三部曲
• Flutter Plugin

其他學(xué)習(xí)資源

• 幫你整理一份快速入門Flutter的秘籍
• 剛剛，阿里宣布開源Flutter應(yīng)用框架Fish Redux！
• Flutter 視頻播放

Flutter 開發(fā)思路

1. Flutter 嵌入 android 插件
   Flutter 是 UI 層級(jí)的跨平臺(tái)，對(duì)于很多功能來說，不同平臺(tái)有各自不同的實(shí)現(xiàn)，F(xiàn)lutter 層就無能為力了，這時(shí)可以在比如 android 平臺(tái)編寫一個(gè) Plugin 插件，然后 Flutter 依賴這個(gè)平臺(tái) native 實(shí)現(xiàn)的庫(kù)，通過 MethodChannel 實(shí)現(xiàn)通信，具體請(qǐng)看：

   • Flutter Plugin 開發(fā)流程
   • Flutter混合開發(fā)——FlutterBoost

2. 優(yōu)先加載渲染耗時(shí)的 Flutter 首幀
   FlutterView的首幀渲染耗時(shí)較高，在Debug版本有明顯感受，大概會(huì)黑屏2秒，release版本會(huì)好很多。但我們觀察Cpu曲線，發(fā)現(xiàn)還是一個(gè)較為耗時(shí)的過程。有一種體驗(yàn)優(yōu)化的思路是，我們可以預(yù)先讓將要使用的 FlutterView 加載好首幀，這樣，在真正使用的時(shí)候就很快了，可以先建立一個(gè)只有1個(gè)像素的窗口，在這個(gè)窗口里面完成FlutterView首幀渲染，代碼如下：
   

3. Flutter 跨平臺(tái)開發(fā)

• 一種flutter應(yīng)用的跨平臺(tái)適配解決方案

Flutter 目前的問題

Flutter 目前對(duì)于我們來說還是太新了，至少缺乏全面的第三發(fā)庫(kù)和服務(wù)支持就是個(gè)死穴，目前適合研究，上手，商業(yè)應(yīng)用需謹(jǐn)慎

• 摘自： Flutter技術(shù)調(diào)研報(bào)告
• Dart 語言，作為一門全新的語言上手成本比較高，對(duì)于移動(dòng)端開發(fā)人員，語言以及框架都是全新的，整個(gè)技術(shù)棧的積累也都得從頭開始
• 編譯后的包體積較大
• 欠缺第三方庫(kù)，需要自己造輪子
• 默認(rèn)只支持 arm-v7a CPU 架構(gòu)，后期應(yīng)該可以修改編譯配置解決此問題
• 多個(gè) Feature 同時(shí)請(qǐng)求時(shí)，可能有的收不到回調(diào)，這個(gè)可能是Dart的消息機(jī)制有關(guān)，需要進(jìn)一步研究，非必現(xiàn)
• WebView的支持很弱
• 音視頻的支持很弱
• API 類似 Android ,對(duì) iOS 開發(fā)者上手可能不是非常友好
• 圖片資源的多倍率適配問題，必須提供一倍圖，會(huì)增大應(yīng)用體積
• Fluter UI實(shí)現(xiàn)嵌套層次太多，可閱讀程度不高（很低 ）
• 境外環(huán)境依賴（有國(guó)內(nèi)鏡像），新建項(xiàng)目 dart package get 不穩(wěn)定
• Flutter 的設(shè)計(jì)圖標(biāo)準(zhǔn)，比如像素值，和 Android 和 ios 的設(shè)計(jì)標(biāo)準(zhǔn)有區(qū)別
• 圖片和文字混排，實(shí)現(xiàn)比較麻煩
• ListView 的視圖復(fù)用機(jī)制，需要調(diào)研，感覺 View 多了會(huì)有點(diǎn)卡頓
• 網(wǎng)絡(luò)圖片的緩存機(jī)制，需要調(diào)研，目前Image所以支持網(wǎng)絡(luò)圖片，但是關(guān)于它的緩存，還不清楚

Flutter Weight UI 組件表

• StatelessWidget - 無狀態(tài)組件
• StatefulWidget - 有狀態(tài)組件
• Image - 圖片
• Icon - 圖標(biāo)
• Text - 文字
• Container - 容器組件，內(nèi)置Padding、寬高、背景、邊框等細(xì)節(jié)操作
• Center - 居中顯示Layout
• Column - 縱向排列Layout
• Row - 橫向排列Layout
• Wrap - 橫向排列Layout，自動(dòng)換行
• CustomScrollView - 支持嵌套滾動(dòng)子控件的滾動(dòng)視圖
• SliverToBoxAdapter - 包裝普通控件，適配CustomScrollView
• ListView - 單一的List組件，不支持PullRefresh
• GideView - 網(wǎng)格組件
• Divider - 分割線組件