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

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

先来点样图

项目地址

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

  

• 项目国际化部分依赖了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版本的确实好看点。

项目结构

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

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

作者：phoneixsky
链接：https://juejin.im/post/5d60f946f265da03d063ab0f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

                        喜欢 就关注吧，欢迎投稿！