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.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 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(context);
复制代码

在这个示例里，我们学习到如果想要在stream里获取我们想要的数据，使用Provider.of(context)

在我们的例子里，Type = LocationModelNormal

如果需要提供更多的值，可以使用MultiProvider

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

本文结束

---

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