基于Google的Flutter,及官方推薦狀態(tài)管理Provider和玩Android開放的API眨攘，打造的一款產(chǎn)品級開源App《Fun Android》
Logo的里F该肴，既代表了
Fun也代表了Flutter.
先來點樣圖
splash.gif
|
首頁空中樓閣
|
tab概覽_1080-50-128.gif
|
|---|---|---|
頁面不同狀態(tài)展示.gif
|
搜索.gif
|
收藏-50.gif
|
登錄頁展示.gif
|
收藏列表到登錄.gif
|
主題切換-1080-75-256.gif
|
項目地址
代碼編譯
Flutter SDK (Channel dev, v1.10.4)
-
如果要查看運行效果,一定要使用Release模式,流暢程度差距非常大
Flutter的
Debug和Release的編譯模式不同,下分別是JIT和AOT.Debug模式支持hot reload. -
iOS運行在splash頁面卡住,需要檢查當(dāng)前的scheme,如果為
release,需在命令行執(zhí)行flutter build ios
image.png -
項目國際化部分依賴了AndroidStudio的插件flutter_i18n
需要在plugin倉庫中,搜索Flutter i18n.安裝插件成功后,重啟AndroidStudio后,會生成lib/generated/i18n.dart文件具體方案和使用參考掘金-rhyme_lphlv的博文
介紹
借用群里水友的兩句對白情竹，在預(yù)覽版出來時候
1A：話說
玩Android的開源項目已經(jīng)多如牛毛了。3C：我想看最漂亮的匀哄。
感謝這位朋友對Fun Android的認可秦效。
關(guān)于App的主題風(fēng)格雏蛮，不全是Google倡導(dǎo)的Material Design 也不全是Apple的Cupertino Style。由于我是一個Android開發(fā)者阱州，但又長期使用的iPhone挑秉，所以App的風(fēng)格是兩者的結(jié)合又夾雜了點私貨。個人認為iOS版本的確實好看點苔货。
代碼中存在的問題犀概，請大家積極提Issue.
更新
V0.1.12 2019-10-21 (未發(fā)布)
- 下拉刷新列表在加載失敗時,如果當(dāng)前頁沒有數(shù)據(jù)顯示錯誤提示頁,有數(shù)據(jù)則彈出toast提示
V0.1.11 2019-10-17
- 增加網(wǎng)絡(luò)加載失敗的提示
V0.1.10 2019-10-16
- 修復(fù)收藏頁面'shareUser'字段為空導(dǎo)致報錯的bug
V0.1.9 2019-10-14
- 極致黑(Native的閃屏頁面適配darkMode)
- 首頁banner高度根據(jù)屏幕寬高適應(yīng)
- 簽名文件調(diào)整
V0.1.8 2019-10-13
- 文章列表加入分享人
- 首頁加入數(shù)據(jù)為空的邏輯判斷
- ViewStateModel中邏輯優(yōu)化,bug fix
- 狀態(tài)欄字體顏色優(yōu)化
- 修復(fù)TextField中hint為中文時不居中的問題
V0.1.7 2019-09-23
- DarkMode自動跟隨系統(tǒng)設(shè)置
- App更新組件調(diào)整
- 適配Dio3.0版本
- pull_to_refresh更新:加入國際化
V0.1.6 2019-09-20
- 修復(fù)收藏列表進入詳情時,頁面報錯的bug
V0.1.5 2019-09-19
- Flutter SDK更新至Channel dev, v1.10.3,修復(fù)
我的頁面莫名卡死的問題 - 修改Android端App名稱為Fun Android
V0.1.4 2019-09-18
- 適配Flutter 1.9.x
- Android加入版本更新
- 加入LeanCloud API云服務(wù)
- 移除修復(fù)首頁黑屏問題的代碼
官方在1.10.1版本已修復(fù) - 移除之前屏幕適配方案,對NativeView影響過大
- 修復(fù)版本更新導(dǎo)致的AppBar中進度條顏色與背景色不明顯的問題
- 重構(gòu)Http使用方式,解耦性更好
- 首頁banner高度調(diào)整
- Android狀態(tài)欄透明
2019-09-10
- flutter版本更新
- 適配更新AppBar區(qū)域CupertinoActivityIndicator的主題色彩沖突
- 移除OffState和Indicator的組合使用,優(yōu)化性能
- 調(diào)整textField的clear實現(xiàn)方式,防止報錯
2019-09-09
- 修復(fù)各頁面里文章 收藏 狀態(tài)沒有同步的問題
- 首頁收藏后,其他tab頁對應(yīng)item的收藏狀態(tài)同步
- 我的收藏頁面里移除收藏.其他頁面狀態(tài)同步
- 登錄登出后各頁面收藏狀態(tài)刷新
- 如果相同賬號在其他平臺修改過收藏狀態(tài),只需要刷新列表即可同步收藏狀態(tài).(WanAndroid接口目前存在問題)
- 優(yōu)化Dropdown彈出動畫
- 首頁初次加載數(shù)據(jù)禁用上拉記載更多功能
- 登錄頁面輸入框可通過回車鍵切換
2019-08-30
- 修復(fù)積分數(shù)值在登錄后沒有刷新的bug
- 修復(fù)進入Splash頁面短暫黑屏的bug
- 修復(fù)未登錄時,點擊收藏還可以播放動畫的bug
- 默認主題色調(diào)整為亮色
2019-08-29
- 添加積分記錄和排行榜功能
2019-08-28
- 在設(shè)置中添加WebViewPlugin的開關(guān)
- 在詳情中移除收藏后,回到收藏列表頁面自動刷新
2019-08-26
-
更新收藏動畫的實現(xiàn)方式,之前實現(xiàn)的方式侵入性太強，每個頁面都要先隱藏一個小??∑崖福現(xiàn)在換了路由?Hero的思路阱冶，重新調(diào)整了Flare。顯示動畫一行代碼就ok滥嘴。(如果你運行代碼之后發(fā)現(xiàn),該動畫與圖上會有一絲絲不一致,列表項右下角的小心會閃一下.不用擔(dān)心那是flutter的bug,目前在master分支已經(jīng)修復(fù).見pr-37341)
Hero-收藏-25-64.gif
項目結(jié)構(gòu)
項目結(jié)構(gòu)1
|
項目解構(gòu)2
|
|---|---|
Provider MVVM的簡單使用方式
- 快速添加一個擁有下拉刷新,上拉加載更多的頁面.比如開發(fā)一個
玩Android首頁列表頁面-
Model
Api -
ViewModel
-w494 -
View
-w637
-
以上是Provider結(jié)合ViewModel的基礎(chǔ)使用方式,考慮了App中會出現(xiàn)的比較全面的情況,希望大家一起探討使用方式
另外在判斷頁面狀態(tài)的時候,其實拿
model.viewState == ViewState.busy會更嚴謹一點.為了書寫方便,加了一個對應(yīng)方法
這里能找到什么木蹬？
-
Provider狀態(tài)管理的最佳實踐，雖然Google很早就廢棄了
Provide若皱，宣布Provider為推薦的狀態(tài)管理工具镊叁，可是在開發(fā)中，我們總是會遇到很多問題走触。比如
Provider的幾個衍生類在具體的業(yè)務(wù)中應(yīng)該怎么使用晦譬？頁面最初需要的數(shù)據(jù)什么時候進行初始化,在哪里初始化。
如何將頁面的幾個常用狀態(tài)
loading互广、error敛腌、empty、idle惫皱、unAuthorized進行組合使用像樊。常用的
下拉刷新，上拉加載更多應(yīng)如何服用才能效果更佳旅敷。Widget在dispose后生棍，
model不再notify()。
-
清晰的代碼結(jié)構(gòu)媳谁。
- 讓頁面歸頁面涂滴，讓業(yè)務(wù)歸業(yè)務(wù)，所有的業(yè)務(wù)邏輯都在
view_model中晴音，Widget只關(guān)注頁面本身柔纵。
- 讓頁面歸頁面涂滴，讓業(yè)務(wù)歸業(yè)務(wù)，所有的業(yè)務(wù)邏輯都在
-
不要再滿屏幕的setState()。
同一頁面內(nèi)可以利用Flutter框架給我們提供的各種XxxBuilder,來局部刷新锤躁。
多層嵌套可使用前邊提到的
Provider首量。當(dāng)然顆粒度足夠細的Widget，還是要使用setState()。eg: ChangeLogPage中的ChangeLogView 功能單一加缘，刷新不會影響別的widget。
-
實現(xiàn)了App的基礎(chǔ)功能觉啊，可copy當(dāng)作模板代碼快速開發(fā)
主題切換
夜間模式切換
字體切換
漂亮的骨架屏
利用
IDE插件i18n進行國際化Dio結(jié)合Cookjar拣宏，實現(xiàn)
玩Android的登錄功能AnimationList結(jié)合SmartRefresh的常規(guī)數(shù)據(jù)加載
當(dāng)然還有WanAndroid本身也有不錯的內(nèi)容，每日閑暇時杠人，可以讀一讀勋乾。
未完成的功能
首頁二樓目前是我個人的blog，也無法前進后退嗡善。后期會放一個flutter專題辑莫。
Hero動畫，在非最后一個tab登陸時罩引，logo的動畫會漂移到最后一個各吨，需要加狀態(tài)判斷。
退出登陸加入動效袁铐。
目前已知存在的問題
webview_flutter 插件的問題還是很多揭蜒，有些鏈接點擊會沒有反應(yīng)，不會跳轉(zhuǎn)剔桨。所以接入了兩套WebView方案
webview_flutter 不能結(jié)合
CustomScrollView滑動屉更。見issue 。兩個同樣顏色的widget洒缀，中間莫名其妙的會多一條背景色的線瑰谜。見issue 。
Future
- 后期會上線大量博客树绩，來講述這個項目里所遇到的問題及解決的思路萨脑。
尋找組織
- 見Github
感謝
感謝 V2Lf 開源項目，很早就在TestFlight中下載了該App,那時還沒開源葱峡。萌生了想做一個開源的App的想法砚哗。
借鑒了
goweiiWanAndroid項目的UI，最美原生版WanAndroid砰奕，感謝蛛芥。在實踐Provider時，發(fā)現(xiàn)了Tutorials,作者Youtube的教程很好军援。
感謝優(yōu)秀的pull_to_refresh刷新庫仅淑。
感謝站酷提供的開源的字體。
感謝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.
