Flutter fish_redux+dio+TabBarView实践

先上图

说下用到的技术：

网络请求：dio，数据状态管理：fish_redux，基本UI架构TabView，TabBarView

网络请求dio

封装比较简单，用的github的api接口，并且只用到了get请求

class NetUtil {
  static Future get(String url, {Map<String, dynamic> params}) async {
    var response = await dio.get(url, queryParameters: params);
    return response.data;
  }
}
复制代码

能够看看原来关于Dio的介绍的文章：

微信公众号“Flutter入门”

数据状态管理fish_redux

原来有一篇关于fish_redux的入门介绍能够先看下，基础知识不作过多介绍

微信公众号“Flutter入门”

基本和redux的原理同样，

1. dispatch一个Action，同时数据数据带过去；
2. 在reducer中接收到对应type的Action和数据后，可能须要处理后，返回数据，数据会到state中；
3. 在page中会绑定reducer，effect，view，state，这样在view中就会拿到数据，更新到UI中；

说说遇到的问题：

1. 网络请求时机

在effect中进行网络请求；

由于这里边有对生命周期的处理，在不一样的生命周期作不一样的事情。

2. 使用Widget

由于在fish_redux中建立的是Page或Component，而TabBarView中的children接收Widget[]。

fish_redux的Page提供了buildPage(null)方法，Component也有相同功能方法，这样就能拿到对应的Widget了

TabView，TabBarView使用

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new TabBar(
          controller: _topController,
          tabs: _topTabs,
        ),
      ),
      body: TabBarView(
        controller: _topController,
        children: [
          RepoListPage().buildPage(null),
          Text('second'),
        ],
      ),
    );
  }
复制代码

使用了两层TabBr，TabBarView嵌套，使用上比较简单，可是目前来看，只能放到Scaffold中使用（但不影响外观设计），TabBr，TabBarView使用同一个controller，分别在tabs和children中加入子Widget。

TabBr，TabBarView使用同一个controller的目的是让上下联动，或者也能够包裹在同一个DefaultTabController或其子类中。根据实际使用场景使用。

以上；

P.S. 后续关注点：

1. Flutter使用的v1.5.4-hotfixes，由于Flutter升到1.7以后，为了支持web开发，添加了Action，和fish_redux的冲突了。fish_redux官方GitHub提供了hide方法，可是我这没有成功。故下降了flutter版本，后续会继续查找问题。
2. 后续页面会继续丰富，second页面会添加相关功能，页面UI会优化（原谅一个我这个开发没有审美）。
3. 会更加关注生命周期相关，好比左右切换页面不会从新请求数据，同时添加下拉刷新。

项目地址：github.com/damengzai/g…