首先分清結(jié)構(gòu)，主攻三大部分
一，基礎(chǔ)控件
1，tabbar控件實現(xiàn)
Scaffold + Appbar + Tabbar + PageView
2，上下刷新列表
Flutter 中 為我們提供了?RefreshIndicator?作為內(nèi)置下拉刷新控件；同時我們通過給?ListView?添加?ScrollController?做滑動監(jiān)聽，在最后增加一個 Item， 作為上滑加載更多的 Loading 顯示。
這里需要注意一點是：可以利用 GlobalKey<RefreshIndicatorState> 對外提供 RefreshIndicator 的 RefreshIndicatorState，這樣外部就 可以通過 GlobalKey 調(diào)用 globalKey.currentState.show();，主動顯示刷新狀態(tài)并觸發(fā) onRefresh 。
?上拉加載更多在代碼中是通過?_getListCount()?方法，在原本的數(shù)據(jù)基礎(chǔ)上，增加實際需要渲染的 item 數(shù)量給 ListView 實現(xiàn)的，最后通過?ScrollController?監(jiān)聽到底部，觸發(fā)?onLoadMore。
3，Loading框
默認系統(tǒng)提供了CircularProgressIndicator，但這里我要推薦一個第三方Loading庫，flutte_spinkit ，通過簡單的配置就可以使用豐富的Loading樣式。
4，矢量圖標庫
矢量圖標可以輕松定義顏色，任意調(diào)整大小不模糊，矢量圖標庫是引入ttf字體庫文件實現(xiàn)，在flutter中通過icon控件，加載對應(yīng)的icondata顯示即可。這里推薦阿里巴巴的iconfont。
fonts: - asset: static/font/iconfont.ttf
5，路由跳轉(zhuǎn)
Flutter中頁面跳轉(zhuǎn)是通過navigator實現(xiàn)的，路由跳轉(zhuǎn)分為：帶參跳轉(zhuǎn)和不帶參跳轉(zhuǎn)。Navigator 的 push 返回的是一個?Future，這個Future?的作用是在頁面返回時被調(diào)用的。也就是你可以通過?Navigator?的?pop?時返回參數(shù)，之后在?Future?中可以的監(jiān)聽中處理頁面的返回結(jié)果。
二，數(shù)據(jù)模塊
1，網(wǎng)絡(luò)請求
dio ,http ,httpclient
2,Json序列化
在Flutter中，json序列化是特殊的。比如使用dio網(wǎng)絡(luò)請求返回，如果配置了返回數(shù)據(jù)格式為json，實際上的收到的是一個map,而map使用不是很方便，所以需要再一次轉(zhuǎn)化，轉(zhuǎn)為實際的Model實體。
創(chuàng)建你的實體 Model 之后，繼承 Object 、然后通過?@JsonSerializable()?標記類名。
通過 with _$TemplateSerializerMixin，將 fromJson 方法委托到 Template.g.dart 的實現(xiàn)中。 其中 *.g.dart、_$* SerializerMixin、_$*FromJson 這三個的引入， 和 Model 所在的 dart 的文件名與 Model 類名有關(guān)，具體可見代碼注釋和后面圖片。
最后通過?flutter packages pub run build_runner build?編譯自動生成轉(zhuǎn)化對象。
3，Redux State? ? --? ? flutter_redux
全局狀態(tài)管理器 -- 跨控件管理，同步state，比如把用戶信息存儲在?redux?的?store?中， 好處在于:?比如某個頁面修改了當前用戶信息，所有綁定的該 State 的控件將由 Redux 自動同步修改。State 可以跨頁面共享。
在redux中主要引入了action，reducer,store概念。
action 用于定義一個數(shù)據(jù)變化的請求。
reducer 用于根據(jù) action 產(chǎn)生新狀態(tài)
store 用于存儲和管理 state，監(jiān)聽 action，將 action 自動分配給 reducer 并根據(jù) reducer 的執(zhí)行結(jié)果更新 state。
Action 用于定義一個數(shù)據(jù)變化的請求行為。Reducer 用于根據(jù) Action 產(chǎn)生新狀態(tài)，一般是一個方法。Store 用于存儲和管理 state。所以一般流程為：1、Widget 綁定了 Store 中的 state 數(shù)據(jù)。2、Widget 通過 Action 發(fā)布一個動作。3、Reducer 根據(jù) Action 更新 state。4、更新 Store 中 state 綁定的 Widget。
4，數(shù)據(jù)庫
按照 sqflite 文檔提供的方法，重新做了一小些修改，通過定義Provider操作數(shù)據(jù)庫：
在 Provider 中定義表名與數(shù)據(jù)庫字段常量，用于創(chuàng)建表與字段操作；
提供數(shù)據(jù)庫與數(shù)據(jù)實體之間的映射，比如數(shù)據(jù)庫對象與User對象之間的轉(zhuǎn)化；
在調(diào)用 Provider 時才先判斷表是否創(chuàng)建，然后再返回數(shù)據(jù)庫對象進行用戶查詢。
三，其他功能
1，返回按鍵監(jiān)聽
? Flutter 中 ，通過WillPopScope?嵌套，可以用于監(jiān)聽處理 Android 返回鍵的邏輯。其實?WillPopScope?并不是監(jiān)聽返回按鍵，如名字一般，是當前頁面將要被pop時觸發(fā)的回調(diào)。
2，前后臺監(jiān)聽
?WidgetsBindingObserver?包含了各種控件的生命周期通知，其中的?didChangeAppLifecycleState?就可以用于做前后臺狀態(tài)監(jiān)聽。
3，鍵盤焦點處理
一般觸摸收起鍵盤也是常見需求，如下代碼所示，?GestureDetector?+?FocusScope?可以滿足這一需求。
4，雙端啟動頁
三，重點挖掘
1,Mixins
Mixin 能夠更好的解決多繼承中容易出現(xiàn)的問題，如：方法優(yōu)先順序混亂、參數(shù)沖突、類結(jié)構(gòu)變得復(fù)雜化等等。
2,WidgetsFlutterBinding
WidgetsFlutterBinding?在 Flutter啟動時runApp會被調(diào)用，作為App的入口，它肯定需要承擔各類的初始化以及功能配置，這種情況下，Mixins 的作用就體現(xiàn)出來了。
3，inheriedWidget
InheritedWidget?是一個抽象類，在 Flutter 中扮演者十分重要的角色，或者你并未直接使用過它，但是你肯定使用過和它相關(guān)的封裝。
InheritedWidget主要實現(xiàn)兩個方法：
創(chuàng)建了InheritedElement，該Element屬于特殊 Element，? 主要增加了將自身也添加到映射關(guān)系表_inheritedWidgets【注1】，方便子孫 element 獲取；同時通過notifyClients方法來更新依賴。
增加了updateShouldNotify方法，當方法返回 true 時，那么依賴該 Widget 的實例就會更新。
所以我們可以簡單理解：InheritedWidget 通過InheritedElement實現(xiàn)了由下往上查找的支持（因為自身添加到_inheritedWidgets），同時具備更新其子孫的功能。
注1：每個 Element 都有一個_inheritedWidgets,它是一個?HashMap<Type, InheritedElement>，它保存了上層節(jié)點中出現(xiàn)的?InheritedWidget?與其對應(yīng) element 的映射關(guān)系。
接著我們看BuildContext，如上圖，BuildContext其實只是接口，Element實現(xiàn)了它。InheritedElement是Element的子類，所以每一個 InheritedElement 實例是一個 BuildContext 實例。同時我們?nèi)粘Ｊ褂弥袀鬟f的 BuildContext 也都是一個 Element 。
所以當我們遇到需要共享 State 時，如果逐層傳遞 state 去實現(xiàn)共享會顯示過于麻煩，那么了解了上面的InheritedWidget之后呢？
是否將需要共享的 State，都放在一個 InheritedWidget 中，然后在使用的 widget 中直接取用就可以呢？答案是肯定的！所以如下方這類代碼：通常如焦點、主題色、多語言、用戶信息等都屬于 App 內(nèi)的全局共享數(shù)據(jù)，他們都會通過 BuildContext（InheritedElement） 獲取。
綜上所述，我們從先Theme入手。
如下方代碼所示，通過給MaterialApp設(shè)置主題數(shù)據(jù)，通過Theme.of(context)就可以獲取到主題數(shù)據(jù)并綁定使用。當MaterialApp的主題數(shù)據(jù)變化時，對應(yīng)的 Widget 顏色也會發(fā)生變化，這是為什么呢(?｀?Д?′)!!？
