百花齐放


语言 : 中文 | English

Flutter Futrue

针对Flutter(Android、IOS)项目,从进入页面开始获取数据,对数据正常\异常时的整体解决方案。 使用flutter_futrue前后对比.png

从上图中可发现 flutter_futrue就是把你打开页面、访问网络数据后的一些列事情及情况都进行了封装,只需要去做对应数据处理(ListView 画 Item)、数据异常后的对应数据(自带重新功能)、登录失效的处理以及对应的接口API的封装。相对来说减轻了开发量及页面代码。


正式项目: AndroidIOS

AndroidIOS

flutter_futrue 特点

  • 半自动处理网络断开、服务器超时、数据为空、登录失效等情况 。
  • 可根据结果集类型定制半自动处理逻辑(耦合不同的格式的JSON结果集)。
  • 可自定义错误页面(含重试功能)。
  • 可自定义转圈页面(随时呼出)。
  • 初入页面时呼出默认转圈。
  • 下拉刷新数据。
  • 上拉加载更多数据。

刷新效果图

模式无内容、无网络模拟返回页面时的情况

使用

  1. 添加依赖
dependencies:
  flutter_futrue: latest_version
  1. 引入
import 'package:flutter_futrue/flutter_futrue.dart';
  1. 替换当前页面extends State更改为extends BaseState
...
//class _YourPageName extends State<YourPageName>{...}
class _YourPageName extends BaseState<YourPageName>{...}
...
  1. 在build中的使用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(... ),
      body: bodyWidget(
        modelList: modelList,
        onRefresh: onRefresh,
        onLoading: onLoading,
        contentBody: body(),
      ),
    );
  }
...
  1. onRefresh(onLoading)获取数据的封装
  void onRefresh() async {
    callRefresh(
      modelList: modelList,
      dao: yourGetDataInterfaceMethod(),
      dataCallback: (Object bean) {
       //当前页面的数据处理,注意bean的类型取决于yourGetDataInterfaceMethod
      },
      tokenInvalidCallback: (msg) =>
          defaultHandlingTokenInvalid(context, msg: msg,page:new Login()),
    );
  }
...

总结了一下开发流程(极简、规范):

1.把当前页面extends State更改为extends BaseState(内部封装了刷新等逻辑及数据粗颗粒处理等逻辑)。 2.在build中使用bodyWidget方法。 3.书写onRefresh/onLoading方法,使用当前页面对应的接口获取数据,处理具体数据(数据正常时、数据为空时,服务器异常时、手机无网络等情况)。 4.书写onBody方法,选择是ListView或GridView及具体Item绘制。 如此,让开发分工于接口接入\测试,UI绘制,逻辑处理,极大的提高了团队的开发效率。

传送门

联系方式

我的FlutterQQ群:10788108 Flutter专栏QQ群:497219582

Libraries

flutter_futrue