Flutter Provider 之 FutureProvider 与 StreamProvider

7,626 阅读3分钟

Provider 基本使用

在之前的一篇文章中,介绍了 Provider 的基本使用,总结一下,Provider 的基本使用总结如下 :

  1. 定义数据 model 管理变量
  2. 通过 ChangeNotifierProvider 将状态和需要使用的状态的组件组合到一起
  3. 使用 Provider.of 或者 Consumer 监听状态或者改变状态。

当然如果是在一个 widget 或者页面里面需要使用多个状态, ChangeNotifierProvider 显然是不够的,因此 Provider 提供了 MultiProvider 来使用多个状态,像这样

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

就可以使用多个状态了。

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

FutureProvider 的使用

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

  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 指定初始值。接下来具体看一下如何使用。

1、定义 异步操作,返回值类型需要是 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');
    });
  }
}

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

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

3、使用 Provider.of 获取状态

    var _users = Provider.of<List<User>>(context);

接下来就可以通过 users 正常的使用变量了。

       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 类型的,也可以指定初始值。接下来看如何使用。

1、定义可以返回 Stream 类型的操作

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

class EventProvider {

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

  }

}

2、初始化 StreamBuilder 并启动发送 Stream 的操作

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

3、通过 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 编程开发」微信公众号 。