Github

安卓请扫码下载体验,ios没有证书,无法下载。

frc aaca15cd2731dbd805bdcf4134e63d53 - flutter 完整项目(mvvm架构)
QRCode_258.png

项目结构

frc cc3fc0074996d4d6d55d19fda6dde919 - flutter 完整项目(mvvm架构)
(logo)

2019年谷歌推出Provider,代替 Provide 成为官方推荐的状态管理方式,Provide已经不再维护,项目已经逐渐替换成了Provider,项目默认分支是provider,可下载该分支查看。

我的主页 老铁们帮忙点个广告: https://www.darrenblog.cn/#/detail/5dbf9a8a7bb725236692b6d4

该项目的特点

1、使用mvvm架构编写。 MVVM架构在Flutter中的简单实践

2、Provider和RxDart 的使用

部分封装介绍

1、refresh组件:刷新组件是在pull_to_refresh的基础上进行的再次封装,该库本身是存在一些问题的,所以就自己改了一下使用。希望该库持续更新,还有其他的刷新库,这里就不详细说了。主要是我们在使用时最好能够读懂别人的组件库的代码,这样才能更好的解决问题。也是一种学习方式。pull__to__refresh

2、OpacityTapWidget组件:OpacityTapWidget组件解决了2个问题:

1)点击效果:点击时child有一个透明度的变化

2)点击的热区问题: OpacityTapWidget内部设置padding增加了点击的热区。

new OpacityTapWidget(
    onTap: () {
        Navigator.of(context).pop();
    },
    child: new Icon(Icons.close, color: Colors.white,size: 27,),
)

3、TapWidget组件:和OpacityTapWidget不一样的是TapWidget点击的效果是背景颜色的变化。

部分第三方库的封装与介绍

1.dio 网络请求封装: Dio

  • Dio初始化
dio = new Dio()
      ..options = BaseOptions(
          baseUrl: AppConfig.baseUrl,
          connectTimeout: 30000,
          receiveTimeout: 30000)
      ..interceptors.add(HeaderInterceptor());
      ..interceptors.add(LogInterceptor(responseBody: true, requestBody: true)); 
  • 拦截器
class HeaderInterceptor extends Interceptor {
  @override
  onRequest(RequestOptions options) {
    final token = AppConfig.userTools.getUserToken();
    if (token != null && token.length > 0) {
      options.headers.putIfAbsent('Authorization', () => 'Bearer' + ' ' + token);
    }
//    if (options.uri.path.indexOf('api/user/advice/Imgs') > 0 || options.uri.path.indexOf('api/user/uploadUserHeader') > 0) { // 上传图片
//      options.headers.putIfAbsent('Content-Type', () => 'multipart/form-data');
//      print('上传图片');
//    } else {
//    }
//    options.headers.putIfAbsent('Content-Type', () => 'application/json;charset=UTF-8');

    return super.onRequest(options);
  }
}

2. rxdart

  • 属性监听
方式1:
final subjectMore = new BehaviorSubject.seeded(false);
方式2:
final subjectMore = new BehaviorSubject();

subjectMore.value = false
_provide.subjectMore.listen((hasMore) {
});

方式1与方式2的不同是,方式1再初始化时就会触发,监听者会在初始化时监听到false参数。

3.flutter_svg 初始化svg格式的图片

new SvgPicture.asset("images/is_single.svg", width: 28, height: 28);

4.shared_preferences 数据存储

由于数据的存储和获取是异步的,但是在项目中使用同步的方法获取用户信息就很是有必要,所以该项目再初始化之前就初始化了shared_preferences,解决了在项目中使用同步的方法获取用户信息这个问题。

void main() async {
  /// 先初始化shared_preferences
  await AppConfig.init();
  runApp(MyApp());
}

frc 1a6a6b95b976c91984fbac430d2d1fea - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.53.png
frc e1315feacdf458ce1bde0cea096bad94 - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.18.png
frc 1798a25207b6963d45eba6b96c076d67 - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.21.png
frc 48bd7f42bbb076c745650b24f948de26 - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.25.png
frc bba6528ed8954ef5fb1d567e5f6f7c9c - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.28.png
frc 013450452f16465b28e501cb349d1b18 - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.35.png
frc 18fe2c5b5f32bb58f0c55fc9e0a04f2d - flutter 完整项目(mvvm架构)
Simulator Screen Shot – iPhone Xʀ – 2019-05-06 at 18.23.38.png

flutter 完整项目(mvvm架构)