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，點擊加入，你們一塊兒學習討論