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

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

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

官方網(wǎng)站：

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

學習網(wǎng)站：

• fidev.io
• flutter.codelabs

簡友教程：

蓋世英雄_64c4 | Q吹個大氣球Q | iwakevin
走路不穿鞋oO | TYL_CQ | 閑魚技術(shù) | 謝棟_ | guaju
阿策神奇 | 開心人 | 乘香墨影 | 戀貓月亮 | Yuzo

Dart 教程

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

Flutter 特性了解

• Flutter - 特性

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

• Flutter - 配置，首次運行

視頻教程

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

實戰(zhàn)項目

1. Flutter 天氣 app

   • Flutter實戰(zhàn)（一）寫一個天氣查詢的APP
   • Flutter實戰(zhàn)（二） 寫一個天氣查詢的APP
   • Flutter實戰(zhàn)（三）檢驗Flutter的跨平臺能力

2. 上拉下拉

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

3. 阿里 Flutter-go

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

4. Flutter豆瓣客戶端

   • FlutterDouBan

5. Panda看書

   • flutter_books

Flutter 和 Android 相互集成

• Flutter 集成到 Android 項目三部曲
• Flutter Plugin

其他學習資源

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

Flutter 開發(fā)思路

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

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

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

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

• 一種flutter應用的跨平臺適配解決方案

Flutter 目前的問題

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

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

Flutter Weight UI 組件表

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