Flutter Provider MVVM的最佳实践开源项目FunAndroid

基于Google的Flutter,及官方推荐状态管理Provider玩Android开放的API,打造的一款产品级开源App《Fun Android

点击查看原图


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

先来点样图

点击查看原图
点击查看原图
点击查看原图
点击查看原图
点击查看原图
点击查看原图
点击查看原图
点击查看原图
点击查看原图


项目地址:

github.com/phoenixsky/…

下载地址:

  • Android:

github.com/phoenixsky/…

点击查看原图



  • IOS:

审核被拒...待调整后上架 ,由于该app内容含有大量Android相关信息,过于挑衅Apple,不知道还有没有希望过审.

介绍

借用群里水友的两句对白,在预览版出来时候

  • 1A:话说玩Android的开源项目已经多如牛毛了。

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

感谢这位朋友对FunAndroid的认可。

关于App的主题风格,不全是Google倡导的Material Design 也不全是Apple的Cupertino Style。由于我是一个Android开发者,但又长期使用的iPhone,所以App的风格是两者的结合又夹杂了点私货。个人认为iOS版本的确实好看点。

代码中存在的问题,请大家积极提Issue.

更新

2019-08-26

  • 更新收藏动画的实现方式,之前实现的方式侵入性太强,每个页面都要先隐藏一个小❤❤。现在换了路由➕Hero的思路,重新调整了Flare。显示动画一行代码就ok。(如果你运行代码之后发现,该动画与图上会有一丝丝不一致,列表项右下角的小心会闪一下.不用担心那是flutter的bug,目前在master分支已经修复.见pr-37341)
点击查看原图

项目结构

点击查看原图
点击查看原图

Provider的简单实用方式

  • 快速添加一个拥有下拉刷新,上拉加载更多的页面.比如开发一个玩Android首页列表页面
    1. 定义获取数据的接口点击查看原图
    2. 编写ViewModel点击查看原图
    3. 编写页面点击查看原图

以上是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. 文章详情页面,也就是webview页面没有加入导航功能,没有找到不影响美观的地方,实在不想像微信那样底部加个箭头,所以目前还不能后退。

  2. 首页二楼目前是我个人的blog,也无法前进后退。后期会放一个flutter专题。

  3. Hero动画,在非最后一个tab登陆时,logo的动画会漂移到最后一个,需要加状态判断。

  4. 退出登陆加入动效。

目前已知存在的问题

  1. 表单中,光标不会切换到下一个。待更新到1.7.8-hotfix4后的稳定版再观察修复。

  2. webview_flutter 插件的问题还是很多,有些链接点击会没有反应,不会跳转。

  3. webview_flutter 不能结合CustomScrollView滑动。见issue

  4. 两个同样颜色的widget,中间莫名其妙的会多一条背景色的线。见issue

  5. Tabbar的Indicator的颜色,在Dark模式切换到Light模式时,偶尔会没有跟随切换。

Future

  1. 后期会上线大量博客,来讲述这个项目里所遇到的问题及解决的思路。

作者的话

  • 坐标上海,想找Flutter方向的工作,4年Android开发,可面向API进行小程序,Vue开发.还成功上架过weex应用.

感谢

  1. 感谢 V2Lf 开源项目,很早就在TestFlight中下载了该App,那时还没开源。萌生了想做一个开源的App的想法。

  2. 借鉴了goweiiWanAndroid项目的UI,最美原生版WanAndroid,感谢。

  3. 在实践Provider时,发现了Tutorials,作者Youtube的教程很好。

  4. 感谢优秀的pull_to_refresh刷新库。

  5. 感谢站酷提供的开源的字体。

  6. 感谢WanAndroid提供的API。

关于作者


本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter Provider MVVM的最佳实践开源项目FunAndroid
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)