产品级Flutter开源项目,FunAndroid,Provider MVVM的最佳实践

基于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的DebugRelease的编译模式不同,下分别是 JITAOT.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. 如何将页面的几个常用状态loadingerroremptyidleunAuthorized进行组合使用。

    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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容