產品級Flutter開源項目FunAndroid，Provider MVVM的最佳實踐

基於Google的Flutter,及官方推薦狀態管理Provider和玩Android開放的API，打造的一款產品級開源App《Fun Android》

Logo的裏F，既表明了Fun也表明了Flutter.

先來點樣圖

項目地址

github.com/phoenixsky/…

下載地址

蒲公英下載頁

代碼編譯

• Flutter SDK (Channel dev, v1.10.4)

• 若是要查看運行效果,必定要使用Release模式,流暢程度差距很是大

  Flutter的Debug和Release的編譯模式不一樣,下分別是 JIT 和 AOT.Debug模式支持hot reload.

• iOS運行在splash頁面卡住,須要檢查當前的scheme,若是爲release,需在命令行執行flutter build ios

  

• 項目國際化部分依賴了AndroidStudio的插件flutter_i18n 須要在plugin倉庫中,搜索Flutter i18n.安裝插件成功後,重啓AndroidStudio後,會生成lib/generated/i18n.dart文件

  具體方案和使用參考掘金-rhyme_lphlv的博文

介紹

借用羣裏水友的兩句對白，在預覽版出來時候

• 1A：話說玩Android的開源項目已經多如牛毛了。

• 3C：我想看最漂亮的。

感謝這位朋友對Fun Android的承認。

關於App的主題風格，不全是Google倡導的Material Design 也不全是Apple的Cupertino Style。因爲我是一個Android開發者，但又長期使用的iPhone，因此App的風格是二者的結合又夾雜了點私貨。我的認爲iOS版本的確實好看點。

代碼中存在的問題，請你們積極提Issue.

更新

V0.1.12 2019-10-21 (未發佈)

• 下拉刷新列表在加載失敗時,若是當前頁沒有數據顯示錯誤提示頁,有數據則彈出toast提示

V0.1.11 2019-10-17

• 增長網絡加載失敗的提示

V0.1.10 2019-10-16

• 修復收藏頁面'shareUser'字段爲空致使報錯的bug

V0.1.9 2019-10-14

• 極致黑(Native的閃屏頁面適配darkMode)
• 首頁banner高度根據屏幕寬高適應
• 簽名文件調整

V0.1.8 2019-10-13

• 文章列表加入分享人
• 首頁加入數據爲空的邏輯判斷
• ViewStateModel中邏輯優化,bug fix
• 狀態欄字體顏色優化
• 修復TextField中hint爲中文時不居中的問題

V0.1.7 2019-09-23

• DarkMode自動跟隨系統設置
• App更新組件調整
• 適配Dio3.0版本
• pull_to_refresh更新:加入國際化

V0.1.6 2019-09-20

• 修復收藏列表進入詳情時,頁面報錯的bug

V0.1.5 2019-09-19

• Flutter SDK更新至Channel dev, v1.10.3,修復個人頁面莫名卡死的問題
• 修改Android端App名稱爲Fun Android

V0.1.4 2019-09-18

• 適配Flutter 1.9.x
• Android加入版本更新
• 加入LeanCloud API雲服務
• 移除修復首頁黑屏問題的代碼官方在1.10.1版本已修復
• 移除以前屏幕適配方案,對NativeView影響過大
• 修復版本更新致使的AppBar中進度條顏色與背景色不明顯的問題
• 重構Http使用方式,解耦性更好
• 首頁banner高度調整
• Android狀態欄透明

2019-09-10

• flutter版本更新
• 適配更新AppBar區域CupertinoActivityIndicator的主題色彩衝突
• 移除OffState和Indicator的組合使用,優化性能
• 調整textField的clear實現方式,防止報錯

2019-09-09

• 修復各頁面裏文章 收藏 狀態沒有同步的問題
  • 首頁收藏後,其餘tab頁對應item的收藏狀態同步
  • 個人收藏頁面裏移除收藏.其餘頁面狀態同步
  • 登陸登出後各頁面收藏狀態刷新
  • 若是相同帳號在其餘平臺修改過收藏狀態,只須要刷新列表便可同步收藏狀態.(WanAndroid接口目前存在問題)
• 優化Dropdown彈出動畫
• 首頁初次加載數據禁用上拉記載更多功能
• 登陸頁面輸入框可經過回車鍵切換

2019-08-30

• 修復積分數值在登陸後沒有刷新的bug
• 修復進入Splash頁面短暫黑屏的bug
• 修復未登陸時,點擊收藏還能夠播放動畫的bug
• 默認主題色調整爲亮色

2019-08-29

• 添加積分記錄和排行榜功能

2019-08-28

• 在設置中添加WebViewPlugin的開關
• 在詳情中移除收藏後,回到收藏列表頁面自動刷新

2019-08-26

• 更新收藏動畫的實現方式,以前實現的方式侵入性太強，每一個頁面都要先隱藏一個小❤❤。如今換了路由➕Hero的思路，從新調整了Flare。顯示動畫一行代碼就ok。(若是你運行代碼以後發現,該動畫與圖上會有一絲絲不一致,列表項右下角的當心會閃一下.不用擔憂那是flutter的bug,目前在master分支已經修復.見pr-37341)

項目結構

Provider MVVM的簡單使用方式

• 快速添加一個擁有下拉刷新,上拉加載更多的頁面.好比開發一個玩Android首頁列表頁面
  1. Model

     

  2. ViewModel

     

  3. View

     

以上是Provider結合ViewModel的基礎使用方式,考慮了App中會出現的比較全面的狀況,但願你們一塊兒探討使用方式

另外在判斷頁面狀態的時候,其實拿model.viewState == ViewState.busy會更嚴謹一點.爲了書寫方便,加了一個對應方法

這裏能找到什麼？

1. Provider狀態管理的最佳實踐，雖然Google很早就廢棄了Provide，宣佈Provider爲推薦的狀態管理工具，但是在開發中，咱們老是會遇到不少問題。

   1. 好比Provider的幾個衍生類在具體的業務中應該怎麼使用？

   2. 頁面最初須要的數據何時進行初始化,在哪裏初始化。

   3. 如何將頁面的幾個經常使用狀態loading、error、empty、idle、unAuthorized進行組合使用。

   4. 經常使用的下拉刷新，上拉加載更多應如何服用才能效果更佳。

   5. Widget在dispose後，model再也不notify()。

2. 清晰的代碼結構。

   1. 讓頁面歸頁面，讓業務歸業務，全部的業務邏輯都在view_model中，Widget只關注頁面自己。

3. 不要再滿屏幕的setState()。

   1. 同一頁面內能夠利用Flutter框架給咱們提供的各類XxxBuilder,來局部刷新。

   2. 多層嵌套可以使用前邊提到的Provider。

   3. 固然顆粒度足夠細的Widget，仍是要使用setState()。eg: ChangeLogPage中的ChangeLogView 功能單一，刷新不會影響別的widget。

4. 實現了App的基礎功能，可copy看成模板代碼快速開發

   1. 主題切換

   2. 夜間模式切換

   3. 字體切換

   4. 漂亮的骨架屏

   5. 利用IDE插件i18n進行國際化

   6. Dio結合Cookjar，實現玩Android的登陸功能

   7. AnimationList結合SmartRefresh的常規數據加載

5. 固然還有WanAndroid自己也有不錯的內容，每日閒暇時，能夠讀一讀。

未完成的功能

1. 首頁二樓目前是我我的的blog，也沒法前進後退。後期會放一個flutter專題。

2. Hero動畫，在非最後一個tab登錄時，logo的動畫會漂移到最後一個，須要加狀態判斷。

3. 退出登錄加入動效。

目前已知存在的問題

1. webview_flutter 插件的問題仍是不少，有些連接點擊會沒有反應，不會跳轉。因此接入了兩套WebView方案

2. webview_flutter 不能結合CustomScrollView滑動。見issue 。

3. 兩個一樣顏色的widget，中間莫名其妙的會多一條背景色的線。見issue 。

Future

• 後期會上線大量博客，來說述這個項目裏所遇到的問題及解決的思路。

尋找組織

• Fun Flutter微信交流羣
  

做者的話

• 座標上海,打算找Flutter方向的工做.4年Android開發經驗.

感謝

1. 感謝 V2Lf 開源項目，很早就在TestFlight中下載了該App,那時還沒開源。萌生了想作一個開源的App的想法。

2. 借鑑了goweiiWanAndroid項目的UI，最美原生版WanAndroid，感謝。

3. 在實踐Provider時，發現了Tutorials,做者Youtube的教程很好。

4. 感謝優秀的pull_to_refresh刷新庫。

5. 感謝站酷提供的開源的字體。

6. 感謝WanAndroid提供的API。

關於做者

• Github
• 我的博客
• 掘金
• 簡書
• Email: moran.fc@gmail.com

License

Copyright 2019 phoenixsky

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

www.apache.org/licenses/LI…

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.