Flutter學習-streambuilder組件

StreamBuilder可以讓stream資料流轉換為UI元素，並做出反應，以便於變化。它可以讓你輕鬆地與stream進行交互，而不用擔心每個變更將如何影響UI。它與FutureBuilder不同的地方，它可以持續的監測傳入的資料流。

參考影片:(中文字幕)Flutter微件 - StreamBuilder

StreamBuilder的建構式如下，它有四個屬性值：

const StreamBuilder({
  super.key,
  this.initialData, //初始值
  super.stream, //要傳入的資料流
  required this.builder, //建構builder，必給值
}) : assert(builder != null);

initialData：要給的初始值

stream:要持續傳入的資料流

builder為收到資料流要執行的回調，builder的格式如下：

builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {

要執行的方法，要有return 值

}
builder的參數context為上下文關係，另一個參數snapshot為取得資料的快照，其類型為AsyncSnapshot，記得要進一步取得裡面的資料內容要使用snapshot.data取得此快照的內容，此為屬性，因此記得在之後不加（）。其它取得的資料，再依傳入資料流的不同類型取得裡面的資料。

如透過http套件取得的json資料，需使用snapshot.data!.body，而firebase取得的資料為snapshot.data!.docs[index].data()

builder的書寫範例，使用switch配合snapshot.connectionState及snapshot.data進行判斷

builder: (BuildContext context,  AsyncSnapshot snapshot) {
  switch(snapshot.connectionState){
    case ConnectionState.none:
      return Text("沒有資料");
      break;
    case ConnectionState.waiting:
      return Text("等待資料");
      break;
    case ConnectionState.active:
      if(snapshot.hasData){
        //取得的資料,要處理的程式寫在此處
        var snapshotData=snapshot.data;
        return Text(snapshotData);
      }else{
        return CircularProgressIndicator();
      }
      break;
    case ConnectionState.done:
      return Text("資料處理完成");
  
      break;
  }

若還是不太了解如何使用，可以參考此影片，說明非常詳細

Flutter 教程 Async-4 Stream與StreamBuilder元件