Android 程序員入坑 Flutter

1、前言

閒來無事，花了兩個多星期入了Flutter的坑，這篇文章總結了一下這段時間學到的東西以及學習過程當中看過的資料，也是想借此機會，看看本身有哪些遺漏的地方，感謝網上的各位大神。

以後也會根據總結好的知識體系，寫一些本身的文章。

2、準備工做

2.1 Dart 語言

學習下來，Dart語言不少地方和Java都很相似，對於Android程序員來講沒有什麼難度。我學習的時候主要關注的幾點：

• 變量定義
• 函數定義（可選參數是最經常使用的點）。
• 類（構造函數定義的一些變種）
• 一些Java中沒有遇到的操做符，例如?.，expr1 ?? expr2，b ??=1。
• List，Map等數據結構的定義方式。
• 單例的實現方式。
• mixin的概念。
• Dart語言中的語法糖

推薦文章

• Dart 教程
• 高效編寫 Dart -- 使用指南

2.2 找一篇完整的教程

找到一篇完整的教程，從頭至尾的跟着學習一遍，不要看獨立的博客，有助於對整個Flutter涉及的方面有一個總體的認識。

在學習完以後，再去針對有疑問的點去針對性地學習。我是跟着下面這篇教程學下來的，受益不淺，感謝！

推薦文章

• Flutter 實戰（做者 wendux）

3、知識點拆解

通過了上面兩步準備工做，就開始對知識點進行拆解，找一個筆記軟件，按照拆解的分類，不管是別人寫的，仍是本身總結的，都要造成「知識組塊」填入到腦海中，纔不容易遺忘。

3.1 Widget

Widget的學習爲兩個方面：

• 第一步：控件使用方式的學習，你們能夠找一些在項目中作過的比較複雜的界面，試着用 Flutter的方式寫一遍，flutter-go 展現了常常會用到的控件，用到控件的時候去看它是怎麼實現的。
• 第二步：除了會用以外，還要去了解一些Widget相關的概念，這裏面比較核心的有：
  • StatelessWidget vs StatefullWidget
  • StatefullWidget中State的生命週期
  • BoxConstraints
  • BuildContext
  • Widget、Element、RenderObject三者的關係

推薦文章

• flutter-go
• Introducing Widget of the Week!，這個是Flutter官方的，簡短地介紹了一些頗有用的控件及其應用場景。
• [Flutter 學習] 頁面佈局之基礎佈局組件

3.2 資源處理 & 屏幕適配

• 如何聲明並使用Flutter APK中的文件、圖片、字體，以及圖片放在不一樣文件夾下加載後所佔的寬高。
• 屏幕適配。

參考資料

• Flutter 實戰 中對應章節。

3.3 動畫

動畫的話簡單的看 Flutter 實戰 中這部分的代碼就好了，主要了解動畫組成，掌握：

• 單個、組合動畫。
• 頁面跳轉動畫。
• 共享元素動畫。

推薦文章

• Flutter 實戰之動畫

3.4 自定義組件

自定義組件有如下三種方式：

• 組合現有的Widget：這種方式比較簡單，組合便可，用於封裝項目中一些通用的佈局。
• 自定義Widget：經過CustomPaint和CustomPainter，相似於在Android當中重寫View.draw(Canvas canvas)，使用Canvas和Paint的API在畫布上繪製，當項目中一些圖形比較複雜的時候會用到它。
• 自定義佈局：自定義RenderBox和MultiChildRenderObjectWidget的子類，用於子Widget的排列規則比較複雜的狀況，例如Flow/Wrap這樣的流式佈局。

推薦文章

• Flutter自定義繪製（1）- 繪製基礎
• Flutter 34: 圖解自定義 View 之 Canvas (一)
• Flutter 35: 圖解自定義 View 之 Canvas (二)
• Flutter 36: 圖解自定義 View 之 Canvas (三)
• CustomPaint 與 Canvas
• 實例：圓形漸變進度條(自繪)
• Flutter 完整開發實戰詳解（十6、詳解自定義佈局實戰）

3.5 手勢處理

• Listener：難點在於HitTestBehavior的場景。
• IgnorePointer和AbsorbPointer：忽略PointEvent。
• GestureDector的回調方法。
• GestureRecognizer的使用
• 手勢的競爭和衝突
• 手勢事件流的源碼分析

推薦文章

• Flutter 中的事件流和手勢簡析
• Flutter 完整開發實戰詳解(十3、全面深刻觸摸和滑動原理)

3.6 異步操做

在Android裏面，異步操做的工具五花八門，AsyncTask、HandlerThread，可是在Flutter裏面，一個async/await就解決問題了，主要掌握下面幾點：

• Flutter的事件模型，isolate的概念。
• Future的概念。
• async/await的使用方式，以及他們在事件循環中運行的時間點。
• isolate之間如何通訊。
• RxDart的用法，這個和RxJava很相似，若是以前學過的應該很容易可以掌握。

推薦文章

• flutter 實戰 5：異步 async、await 和 Future 的使用技巧
• 深刻理解 Flutter 多線程

3.7 路由

掌握頁面間跳轉和傳遞參數的方式。

推薦文章

Flutter 實戰之路由管理

3.8 數據操做

數據操做分爲如下幾類，都有開源的包可使用，查看說明文檔便可。

• SharePreference，shared_preferences
• 文件，path_provider
• 數據庫，sqflite
• 網絡請求，http://www.javashuo.com/tag/dio
• 在網絡請求的時候，還會遇到將JSON轉換成實體類的問題， json_serializable。

3.9 Flutter 與 Native 的通訊

• Flutter和Native之間如何進行數據和方法的傳遞。
• 如何在Flutter中嵌入Android View。

參考文章

• Flutter Platform channel 詳解
• Flutter 實例 - 從本地到 Flutter 通訊 - Event Channels
• 深刻理解 Flutter Platform Channel

3.10 狀態管理

mclzone 寫的一系列關於狀態管理的文章很棒！看完以後就明白了，沒有再看過其它的文章。

推薦文章

• Flutter | 狀態管理探索篇 —— Scoped Model （一）
• Flutter | 狀態管理探索篇 —— Redux （二）
• Flutter | 狀態管理探索篇 —— BLoC (三)
• Flutter | 狀態管理拓展篇 —— RxDart (四)
• Flutter | 狀態管理指南篇 —— Provider

3.11 國際化

國際化的掌握分爲三步：

• 跟着 實用的 Flutter 國際化指南 中的標準方式作一遍。
• 用 flutter_i18n 實現一遍，會發現其實現原理同上，只是將轉換部分的邏輯自動生成了。
• 看一下 flutter_gank ，瞭解如何在項目中實現。

推薦文章

• 實用的 Flutter 國際化指南
• 國際化
• intl

3.12 進階

(1) 編譯 & 打包原理

• Flutter 原理及美團實踐
• 深刻理解 Flutter 的編譯原理與優化

(2) 初始化流程

• 深刻分析 Flutter 初始化流程
• 關於 Flutter 初始化流程，我必須告訴你的是...

(3) 繪製框架分析

ad6623 - 掘金 寫的下面這系列關於渲染流水線的文章很棒，我每篇都邊看邊畫流程圖跟着學了下來，雖然很痛苦，可是收貨很大，感謝！

• Flutter 框架分析

(4) 繪製框架的一些補充文章

• Flutter 實現原理及在馬蜂窩的跨平臺開發實踐
• Joey的Flutter之旅 - (3) 佈局構建、渲染、繪製機制淺析
• Flutter 視圖的 Layout 與 Paint
• Flutter's Rendering Pipeline

(5) Dart

• Dart 的內存回收機制介紹

(6) 手勢處理事件流

• Flutter 中的事件流和手勢簡析
• Flutter 完整開發實戰詳解(十3、全面深刻觸摸和滑動原理)

3.13 看一下實際的 App 是如何實現的

• flutter_gank
• GSYGithubAppFlutter

3.14 性能優化

剛入門，還沒到性能優化的地步，還需繼續努力。= =

3.15 打包 & 發佈

4、小結

固然，這只是一篇入門的教程，離工程化的標準還很遠，這種只能到項目中實踐了。