当用户在使用StreamBuilder时离线时，如何显示不同的Widget? [英] How to show different Widget when user is offline while using StreamBuilder?

问题描述

我正在尝试从互联网上获取一些数据.使用FutureBuilder可以轻松处理脱机，在线，错误等各种情况，但是我正在使用StreamBuilder，但我不明白如何处理脱机情况

I am trying to fetch some data from the internet. With the use of FutureBuilder, handling for various cases like offline, online,error is quite easy but I am using StreamBuilder and I am not able to understand how to handle offline case

以下是我使用StreamBuilder的代码，该代码有效，但我尚未处理离线数据或错误

Following is my code to use StreamBuilder which works but I have not handled offline data or error

return StreamBuilder(
      builder: (context, AsyncSnapshot<SchoolListModel> snapshot) {
        if (snapshot.hasError) {
          return Expanded(
              child: Center(
            child: Text(SOMETHING_WENT_WRONG),
          ));
        }

        if (!snapshot.hasData) {
          return Expanded(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }

        if (snapshot.data != null) {
          if (snapshot.data.status == 1) {
            return buildSchoolList(snapshot.data.schoolListData);
          } else {
            showMessageDialog(snapshot.data.msg.toString(), context);
          }
        }
        },
      stream: schoolListBloc.schoolList,
    );
  }

现在要处理离线案件，我正在做以下两个选择，这些选择在我的情况下不起作用

Now to handle the offline case I am doing the following two options which don't work in my case

选项一.

return StreamBuilder(
      builder: (context, AsyncSnapshot<SchoolListModel> snapshot) {
       switch (snapshot.connectionState) {
          case ConnectionState.none:
            return Text(SOMETHING_WENT_WRONG);
          case ConnectionState.active:
          case ConnectionState.waiting:
            return Expanded(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          case ConnectionState.done:
            if (snapshot.hasError) {
              return errorData(snapshot);
            } else {
              if (snapshot.data.status == 1) {
                return buildSchoolList(snapshot.data.schoolListData);
              } else {
                showMessageDialog(snapshot.data.msg.toString(), context);
              }
            }
        }
      },
      stream: schoolListBloc.schoolList,
    );
  }

我一直看到CircularProgressIndicator并且在控制台上没有错误. 我不明白为什么上述开关盒适用于FuturBuilder而不是StreamBuilder.

I keep seeing the CircularProgressIndicator and no error on the console. I fail to understand why the above switch case works for FuturBuilder and not StreamBuilder.

第二个选项.

Future<bool> checkInternetConnection() async {
  try {
    final result = await InternetAddress.lookup('google.com');
    if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
      print('connected');
      return true;
    }
  } on SocketException catch (_) {
    print('not connected');
    return false;
  }
  return false;
}


return StreamBuilder(
      builder: (context, AsyncSnapshot<SchoolListModel> snapshot) {
       checkInternetConnection().then((isAvailable) {
          if (isAvailable) {
            if (!snapshot.hasData || snapshot.data == null) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }

            if (snapshot.data != null) {
              if (snapshot.data.status == 1) {
                return buildSchoolList(snapshot.data.schoolListData);
              } else {
                showMessageDialog(snapshot.data.msg.toString(), context);
              }
            }
          } else {
            return Center(
              child: Column(
                children: <Widget>[
                  Text(CHECK_YOUR_INTERNET_CONNECTION),
                  RaisedButton(
                    onPressed: () {},
                    child: Text(TRY_AGAIN),
                  )
                ],
              ),
            );
          }
        }); },
      stream: schoolListBloc.schoolList,
    );
  }

使用此选项会引发以下错误

Using this option throws the following error

the following assertion was thrown building StreamBuilder<SchoolListModel>(dirty, state:
I/flutter ( 5448): _StreamBuilderBaseState<SchoolListModel, AsyncSnapshot<SchoolListModel>>#dd970):
I/flutter ( 5448): A build function returned null.
I/flutter ( 5448): The offending widget is: StreamBuilder<SchoolListModel>
I/flutter ( 5448): Build functions must never return null. To return an empty space that causes the building widget to
I/flutter ( 5448): fill available room, return "new Container()". To return an empty space that takes as little room as..

在使用StreamBuilder时，在以下情况下需要处理离线，在线和错误数据的情况

What approach should I take with the following cases of offline, online and error data when using StreamBuilder

推荐答案

您可以将Error添加到Stream并将其捕获在StreamBuilder中，如下所示:

You can add Error to Stream and catch it in StreamBuilder like this:

_someStreamCtrl.addError(error);  // Client is offline

在StreamBuilder中:

StreamBuilder<String>(
      stream: someStream,
      initialData: [],
      builder: (BuildContext context,
          AsyncSnapshot<String> snap) {
        if (snap.hasError)
            return ErrorWidget(); //Error
        if (snap.hasData)
          return // Desired widget

        //if waiting
          return CircularProgressIndicator();
        );
      },
    );

这篇关于当用户在使用StreamBuilder时离线时，如何显示不同的Widget?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！