Flutter Provider and Streams [翻译]

原文：medium.com/flutterpub/…

不是所有翻译，由于这个老外废话比较多

正文开始

除了StreamBuilder以外，还有没有其余办法收听实时数据？

最近，Flutter团队在Google I / O 2019上宣布了一个名为Provider的状态管理软件包。

使用方式，添加以下依赖到你的pubspec.yaml文件

provider: ^2.0.0+1
复制代码

在之前，咱们是这样使用StreamBuilder来监听数据的：

StreamBuilder(
  stream: //YOUR STREAM, 
  builder: (BuildContext context, AsyncSnapshot snapshot){ 
  return //YOUR CHILD; 
})
复制代码

若是换作provider的话，是这样的：

StreamProvider<LocationModelNormal>.value(
    initialData: LocationModelNormal.initialData(),
    stream: locationStreamInstance.specificLocation(_secondWonder),
    child: SecondStreamWidget(),
),
复制代码

使用步骤：

1. 使用StreamProvider的时候，咱们须要指定咱们监听的对象类型

上面例子的LocationModelNormal代码以下：

class LocationModelNormal {
  final String name;

  final String url;

  final GeoPoint coordinates;

  final String videoURL;

  LocationModelNormal({
    this.name,
    this.url,
    this.coordinates,
    this.videoURL,
  });

  factory LocationModelNormal.fromMap(Map<String, dynamic> data) {
    return LocationModelNormal(
      name: data['name'] ?? '',
      url: data['url'] ?? '',
      coordinates: data['location'] ?? null,
      videoURL: data['link'] ?? '',
    );
  }

  factory LocationModelNormal.initialData() {
    return LocationModelNormal(
      coordinates: null,
      name: '',
      videoURL: '',
      url:'',
    );
  }
}
复制代码

2. 而后，咱们提供initialData

在咱们的例子中，咱们传递的是LocationModelNormal.initialData()（代码在上面）

3. 最后，咱们提供child widget

完成了，和StreamBuilder很类似

如何访问数据

如今咱们写好了StreamProvider，咱们须要在child中显示咱们提供的数据,获取数据的方式：

var data = Provider.of<LocationModelNormal>(context);
复制代码

在这个示例里，咱们学习到若是想要在stream里获取咱们想要的数据，使用Provider.of<Type>(context)

在咱们的例子里，Type = LocationModelNormal

若是须要提供更多的值，可使用MultiProvider

MultiProvider(
  providers: [
    Provider<Foo>.value(value: foo),
    Provider<Bar>.value(value: bar),
    Provider<Baz>.value(value: baz),
  ],
  child: someWidget,
)
复制代码

本文结束

---

题外话：这些状态管理，其实没什么区别，都是用context.ancestorWidgetOfExactType(type);相似的方法去查找上层的节点中的数据，如今网上的这些bloc、provide等等，都是这样，本身写一个也很容易，能够看我以前的文章：教你如何实现Flutter的BLoC框架

欢迎加入Flutter开发群457664582，点击加入，你们一块儿学习讨论