如何在 Flutter StreamBuilder 中使用 hasData、hasError 和 ConnectionState 处理 snapshot.data

Question

I'm not sure about how to handle Flutter StreamBuilder. I found 3 cases and want to know which one would be better than others with any reason. Or if there is a better way to handle it other than these cases.

Also, what is the difference between ConnectionState.active and ConnectionState.done ? Should I wait using snapshot.data until ConnectionState.done or not ( Case 1 Or Case 2 ).

Case 1:

    return StreamBuilder(
      builder: (context, snapshot) {
        if (snapshot.hasError) return Text('Error');
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
            return CircularProgressIndicator();
          case ConnectionState.active:
          case ConnectionState.done:
            return Text('${snapshot.data}');
        }
        return null;
      },
    );

Case 2:

    return StreamBuilder(
      builder: (context, snapshot) {
        if (snapshot.hasError) return Text('Error');
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
          case ConnectionState.active:
            return CircularProgressIndicator();
          case ConnectionState.done:
            return Text('${snapshot.data}');
        }
        return null;
      },
    );

Case 3:

    return StreamBuilder(
      builder: (context, snapshot) {
        if (snapshot.hasError) return Text('Error');
        if (!snapshot.hasData) return CircularProgressIndicator();
        return Text('${snapshot.data}');
      },
    );

Answer 1

According to Flutter Docs it states the the difference between active and done is that ConnectionState.active : is the Stream that its not done yet but returned at least one value,
ConnectionState.done : where it has terminated the asynchronous computation/transaction you are dealing with.

---

regarding your question on when should you wait, It depends on the kind of computation you are doing.

Normally ConnectionState.active is more important to take care of because you are dealing with a stream which means data could be updated and the state of your app should also update.

You can use ConnectionState.done to make sure you fetched the data and the asynchronous connection is terminated.

To get a good idea on how to deal with StreamBuilder and QuerySnapshot check out Firebase for Flutter