如何在使用 StreamBuilder 时用户离线时显示不同的 Widget?
How to show different Widget when user is offline while using StreamBuilder?
我正在尝试从互联网上获取一些数据。使用FutureBuilder
,处理离线、在线、错误等各种情况非常容易,但我使用的是StreamBuilder
,我无法理解如何处理离线情况
以下是我使用 StreamBuilder 的代码,它可以工作,但我没有处理离线数据或错误
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,
);
}
现在为了处理离线情况,我正在执行以下两个对我的情况不起作用的选项
选项一。
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
并且没有错误。
我不明白为什么上面的 switch case 适用于 FuturBuilder
而不是 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,
);
}
使用此选项会引发以下错误
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时遇到以下离线、在线、错误数据应该怎么处理
您可以将错误添加到 Stream
并在 StreamBuilder
中捕获它,如下所示:
_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();
);
},
);
我正在尝试从互联网上获取一些数据。使用FutureBuilder
,处理离线、在线、错误等各种情况非常容易,但我使用的是StreamBuilder
,我无法理解如何处理离线情况
以下是我使用 StreamBuilder 的代码,它可以工作,但我没有处理离线数据或错误
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,
);
}
现在为了处理离线情况,我正在执行以下两个对我的情况不起作用的选项
选项一。
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
并且没有错误。
我不明白为什么上面的 switch case 适用于 FuturBuilder
而不是 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,
);
}
使用此选项会引发以下错误
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时遇到以下离线、在线、错误数据应该怎么处理
您可以将错误添加到 Stream
并在 StreamBuilder
中捕获它,如下所示:
_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();
);
},
);