Flutter Provider and Streams [翻譯]

o動感超人o發表於2019-05-29
FlutterIDE

原文：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框架

相關文章