Flutter Provider 之 FutureProvider 与 StreamProvider

时间 2019-12-08

标签 flutter provider futureprovider streamprovider 繁體版

原文原文链接

Provider 基本使用

在以前的一篇文章中，介绍了 Provider 的基本使用，总结一下，Provider 的基本使用总结以下 :git

定义数据 model 管理变量
经过 ChangeNotifierProvider 将状态和须要使用的状态的组件组合到一块儿
使用 Provider.of 或者 Consumer 监听状态或者改变状态。

固然若是是在一个 widget 或者页面里面须要使用多个状态， ChangeNotifierProvider 显然是不够的，所以 Provider 提供了 MultiProvider 来使用多个状态，像这样github

MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light() )
        ],
        child: MyApp()
    )
复制代码

就可使用多个状态了。web

接下来介绍 Provider 里面另外两个比较重要的 Provider: FutureProvider 和 StreamProvider。经过名字就看得出来，这两个 Provider 和异步执行有关。更详细的介绍和使用参考这篇文章，若是你不能访问这篇文章也没有关系，接下来我会根据这篇文章来介绍一下这两个 Provider 是若是使用的。编程

FutureProvider 的使用

FutureProvider 使用起来也很简单。先看一下构造函数：json

FutureProvider({
    Key key,
    @required ValueBuilder<Future<T>> builder,
    T initialData,
    ErrorBuilder<T> catchError,
    UpdateShouldNotify<T> updateShouldNotify,
    Widget child,
  }) : this._(
          key: key,
          initialData: initialData,
          catchError: catchError,
          updateShouldNotify: updateShouldNotify,
          delegate: BuilderStateDelegate(builder),
          child: child,
        );

复制代码

能够看到，builder 的返回值类型确实是 Future 类型的，而且能够经过 initiaData 指定初始值。接下来具体看一下如何使用。bash

一、定义异步操做，返回值类型须要是 Future 类型的

好比读取 assets 下的 json 文件并解析，这确定是一个耗时的操做，所以须要异步进行。微信

class UserProvider {
  final String _dataPath = "assets/data/users.json";
  List<User> users;

  Future<List<User>> loadUserData( ) async {
    var dataString = await loadAsset();
    Map<String, dynamic> jsonUserData = jsonDecode(dataString);
    users = UserList.fromJson(jsonUserData['users']).users;
    print('done loading user!' + jsonEncode(users));
    return users;
  }

  Future<String> loadAsset() async {
    return await Future.delayed(Duration(seconds: 10), () async {
      return await rootBundle.loadString('assets/data/users.json');
    });
  }
}
复制代码

二、FutureProvider 中指定刚才定义的 UserProvider 而且调用初始化函数。

MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData: 0)
        ],
        child: MyApp()
    )
复制代码

三、使用 Provider.of 获取状态

var _users = Provider.of<List<User>>(context);
复制代码

接下来就能够经过 users 正常的使用变量了。app

ListView.builder(
                itemCount: _users.length,
                itemBuilder: (context, index){
                  return Container(
                      height: 50,
                      color: Colors.grey[(index*200) % 400],
                      child: Center(
                          child: Text(
                              '${_users[index].firstName} ${_users[index].lastName} | ${_users[index].website}'
                          )
                      )
                  );
                }
            )
复制代码

StreamProvider 的使用

其构造函数以下:异步

StreamProvider({
    Key key,
    @required ValueBuilder<Stream<T>> builder,
    T initialData,
    ErrorBuilder<T> catchError,
    UpdateShouldNotify<T> updateShouldNotify,
    Widget child,
  }) : this._(
          key: key,
          delegate: BuilderStateDelegate<Stream<T>>(builder),
          initialData: initialData,
          catchError: catchError,
          updateShouldNotify: updateShouldNotify,
          child: child,
        );

复制代码

和 FuturePrivider 相似，返回值是 Stream 类型的，也能够指定初始值。接下来看如何使用。async

一、定义能够返回 Stream 类型的操做

这里只是每隔两秒返回一个数字。

class EventProvider {

  Stream<int> intStream() {
    Duration interval = Duration(seconds: 2);
   return Stream<int>.periodic(interval, (int _count) => _count++);

  }

}
复制代码

二、初始化 StreamBuilder 并启动发送 Stream 的操做

MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:0)
        ],
        child: MyApp()
    )
复制代码

三、经过 Provider.of 读取状态

var _value = Provider.of<ThemeData>(context);
复制代码

使用这个状态:

Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('StreamProvider Example'),
                SizedBox(height: 150),
                Text('${_value.toString()}',
                    style: Theme.of(context).textTheme.display1
                )
              ],
            )
        )
复制代码

这样界面上的数字就是每隔两秒钟刷新一次了。

接下来再看一个例子，经过 StreamProvider 来改变主题。将刚才的 EventProvider 改成以下:

class EventProvider {

  Stream<ThemeData> intStream() {
    Duration interval = Duration(seconds: 2);
   // ThemeData  themeData = _themeData == ThemeData.light()?ThemeData.dark():ThemeData.light()
    return Stream<ThemeData>.periodic(interval, (int _count) => _count %2 == 0?ThemeData.light():ThemeData.dark() );
   //return Stream<int>.periodic(interval, (int _count) => _count %2 == 0? 11: 22  );
  // return Stream<int>.periodic(interval, (int _count) => _count++);
  }

}
复制代码

每隔两秒改变一次主题。

初始化 StreamProvider:

MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light())
        ],
        child: MyApp()
    )
复制代码

使用 Provider.of 读取状态

return MaterialApp(
        title: 'Flutter Demo',
       // theme: ThemeData.light(),
      //  theme: themeData,
        theme:  Provider.of<ThemeData>(context),


        home:  DefaultTabController(
            length: 3,
            child: DefaultTabController(
              length: 3,
              child: Scaffold(
                appBar: AppBar(
                  title: Text("Provider Demo：" ),
                  bottom: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.add)),
                      Tab(icon: Icon(Icons.person)),
                      Tab(icon: Icon(Icons.message)),
                    ],
                  ),
                ),
                body: TabBarView(
                  children: [
                    HomePage(),
                    MyUserPage(),
                    MyEventPage(),
                  ],
                ),
              ),
            )
        )

    );
复制代码

效果以下：

github

最后

欢迎关注「Flutter 编程开发」微信公众号。