如何在全球范围内检查互联网连接并显示无连接屏幕答案

【问题标题】：How to check internet connection globally and show no connection screen如何在全球范围内检查互联网连接并显示无连接屏幕
【发布时间】：2021-02-06 06:04:10
【问题描述】：

我在我的项目中使用connectivity 包来检查互联网连接。

文件main.dart代码：

StreamProvider<ConnectivityResult>(
    create: (context) =>
        InternetConnectionService().connectionStatusController.stream,
    child: MaterialApp(
.....

在每个屏幕上，我都会像这样检查互联网连接：

bool hasConnection;

void checkConnectivity(context) async {
  var connectivityResult = Provider.of<ConnectivityResult>(context);
  if (connectivityResult == ConnectivityResult.none ||
      connectivityResult == null) {
    setState(() {
      hasConnection = false;
    });
  } else {
    setState(() {
      hasConnection = true;
    });
  }
}

Widget build(BuildContext context) {
  checkConnectivity(context);
  return hasConnection == true 
    ? Scaffold() 
    : NoInternetScreen();
}

我如何从根或一个小部件的每个屏幕上全局检查连接而不显示连接屏幕？

【问题讨论】：

你不能把checkConnectivity放在主文件里吗？
是的，我可以做到@JohnJoe 在这种情况下可以在任何地方工作吗？我必须怎么做，你能举个例子吗？
是的，可以在任何地方工作。只需使用您在每个屏幕上提供的小部件构建代码到您的主文件。

标签： flutter dart flutter-dependencies connectivity

【解决方案1】：

在您的 MaterialApp 小部件中，有一个构建器。您可以使用构建器将路径包装在任何小部件中。尝试这样做：

MaterialApp(
    ...
    builder: (context, child) {
        return StreamBuilder<ConnectivityResult>(
            stream: InternetConnectionService().connectionStatusController.stream,
            builder: (context, snapshot) {
                final conenctivityResult = snapshot.data;
                if (connectivityResult == ConnectivityResult.none || connectivityResult == null) return NoInternetScreen();

                return child;
            }
        );
    }
);

现在您不必在其他文件中添加任何互联网逻辑。您可以简单地编写排除它们的构建方法。

【讨论】：

【解决方案2】：

   class ConnectivityUtils {
      static Future<bool> hasConnection() async {
        bool hasWifi = false;
        bool hasMobileConnection = false;
        var connectivityResult = await (Connectivity().checkConnectivity());
        if (connectivityResult == ConnectivityResult.mobile) {
          hasMobileConnection = true;
        } else if (connectivityResult == ConnectivityResult.wifi) {
          hasWifi = true;
        }
        return hasWifi || hasMobileConnection;
      }
}

可以使用这个类，调用API前可以先调用hasConnection() 如果为 false，则可以显示无连接屏幕

【讨论】：