Language: [English](https://github.com/phoenixsky/fun_android_flutter/blob/master/README-EN.md) | [中文简体](https://github.com/phoenixsky/fun_android_flutter/blob/master/README.md)
# 产品级Flutter开源项目FunAndroid，Provider MVVM的最佳实践
> 基于Google的[Flutter](https://flutter.dev),及官方推荐状态管理[Provider](https://github.com/rrousselGit/provider)和[玩Android](https://wanandroid.com/)开放的API，打造的一款产品级开源App《[Fun Android](https://github.com/phoenixsky/fun_android_flutter)》
> Logo的里F，既代表了`Fun`也代表了`Flutter`.
# 先来点样图
||  | |
| --- | --- | --- |
|  | | |
|  |  | |
# 项目地址：
> [https://github.com/phoenixsky/fun_android_flutter](https://github.com/phoenixsky/fun_android_flutter)
# 下载地址:
* Android：
* [请前往release页面](https://github.com/phoenixsky/fun_android_flutter/releases)
* iOS:
> `审核被拒...待调整后上架` ,由于该app内容含有大量Android相关信息,过于挑衅`Apple`,不知道还有没有希望过审.
# 介绍
借用群里水友的两句对白，在预览版出来时候
* 1A：话说`玩Android`的开源项目已经多如牛毛了。
* 3C：我想看最漂亮的。
感谢这位朋友对`FunAndroid`的认可。
关于App的主题风格，不全是Google倡导的Material Design 也不全是Apple的Cupertino Style。由于我是一个Android开发者，但又长期使用的iPhone，所以App的风格是两者的结合又夹杂了点私货。个人认为iOS版本的确实好看点。
代码中存在的问题，请大家积极提[Issue](https://github.com/phoenixsky/fun_android_flutter/issues).
# 更新
## 2019-08-29
- 添加积分记录和排行榜功能
## 2019-08-28
- 在设置中添加WebViewPlugin的开关
- 在详情中移除收藏后,回到收藏列表页面自动刷新
## 2019-08-26
- 更新收藏动画的实现方式,之前实现的方式侵入性太强，每个页面都要先隐藏一个小❤❤。现在换了路由➕Hero的思路，重新调整了Flare。显示动画一行代码就ok。(如果你运行代码之后发现,该动画与图上会有一丝丝不一致,列表项右下角的小心会闪一下.不用担心那是flutter的bug,目前在master分支已经修复.见[pr-37341](https://github.com/flutter/flutter/pull/37341))
# 项目结构
|  |  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| | |
# Provider MVVM的简单使用方式
* 快速添加一个拥有下拉刷新,上拉加载更多的页面.比如开发一个`玩Android`首页列表页面
1. Model
2. ViewModel
3. View
> 以上是Provider结合ViewModel的基础使用方式,考虑了App中会出现的比较全面的情况,希望大家一起探讨使用方式
> 另外在判断页面状态的时候,其实拿`model.viewState == ViewState.busy`会更严谨一点.为了书写方便,加了一个对应方法
# 这里能找到什么？
1. Provider状态管理的最佳实践，虽然Google很早就废弃了`Provide`，宣布[`Provider`](https://github.com/rrousselGit/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](https://github.com/phoenixsky/fun_android_flutter/blob/6b4167c5f540b0c656c97ac8fe71a861601649d2/lib/ui/page/change_log_page.dart) 功能单一，刷新不会影响别的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. 表单中，光标不会切换到下一个。待更新到1.7.8-hotfix4后的稳定版再观察修复。
2. [webview_flutter](https://pub.dev/packages/webview_flutter) 插件的问题还是很多，有些链接点击会没有反应，不会跳转。所以接入了两套WebView方案
3. [webview_flutter](https://pub.dev/packages/webview_flutter) 不能结合`CustomScrollView`滑动。见[issue](https://github.com/flutter/flutter/issues/31243#issuecomment-521564216) 。
4. 两个同样颜色的widget，中间莫名其妙的会多一条背景色的线。见[issue](https://github.com/flutter/flutter/issues/14288) 。
5. TabBar的Indicator的颜色，在Dark模式切换到Light模式时，偶尔会没有跟随切换。
# Future
1. 后期会上线大量博客，来讲述这个项目里所遇到的问题及解决的思路。
# 作者的话
* 坐标上海,想找Flutter方向的工作,4年Android开发,可面向API进行小程序,Vue开发.还成功上架过weex应用.
# 感谢
1. 感谢 [V2Lf](https://github.com/w4mxl/V2LF) 开源项目，很早就在TestFlight中下载了该App,那时还没开源。萌生了想做一个开源的App的想法。
2. 借鉴了`goweii`[WanAndroid](https://github.com/goweii/WanAndroid)项目的UI，最美原生版WanAndroid，感谢。
3. 在实践Provider时，发现了[Tutorials](https://github.com/FilledStacks/flutter-tutorials),作者Youtube的教程很好。
4. 感谢优秀的[pull_to_refresh](https://pub.dev/packages/pull_to_refresh)刷新库。
5. 感谢站酷提供的开源的字体。
6. 感谢WanAndroid提供的API。
# 关于作者
* [Github](https://github.com/phoenixsky)
* [个人博客](http://blog.phoenixsky.cn/)
* [简书](https://www.jianshu.com/u/145e6297cb26)
* Email: moran.fc@gmail.com
# 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.
马建仓 AI 助手
