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

logo,靈感來自2dimensions是個藍色的F，自己挺喜歡，就down了下來，后來又翻了好久也沒找到作者，如果侵權請聯系我

Logo的里F，既代表了Fun也代表了Flutter.

先來點樣圖

splash.gif	首頁空中樓閣	tab概覽_1080-50-128.gif
頁面不同狀態展示.gif	搜索.gif	收藏-50.gif
登錄頁展示.gif	收藏列表到登錄.gif	主題切換-1080-75-256.gif

項目地址

https://github.com/phoenixsky/fun_android_flutter

代碼編譯

• Flutter SDK (Channel dev, v1.10.4)

• 如果要查看運行效果,一定要使用Release模式,流暢程度差距非常大

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

• iOS運行在splash頁面卡住,需要檢查當前的scheme,如果為release,需在命令行執行flutter build ios
  

  image.png

• 項目國際化部分依賴了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)

  Hero-收藏-25-64.gif

項目結構

項目結構1	項目解構2

Provider MVVM的簡單使用方式

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

  1. Model

     
     
     Api

  2. ViewModel

     
     
     -w494

  3. View

     
     
     -w637

以上是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

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

尋找組織

• 見Github

感謝

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

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

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

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

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

6. 感謝WanAndroid提供的API。

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

http://www.apache.org/licenses/LICENSE-2.0

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.