Flutter 如何全局检查internet连接并显示无连接屏幕

我在项目中使用软件包检查internet连接

文件

main.dart

code:

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

StreamProvider(
创建：（上下文）=>
InternetConnectionService（）.connectionStatusController.stream，
孩子：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();
}

bool连接；
void checkConnectivity（上下文）异步{
var connectivityResult=Provider.of（上下文）；
if（connectivityResult==connectivityResult.none||
connectivityResult==null）{
设置状态（）{
hassconnection=false；
});
}否则{
设置状态（）{
hasConnection=true；
});
}
}
小部件构建（构建上下文）{
检查连通性（上下文）；
返回hasConnection==true
？脚手架（）
：NoInternetScreen（）；
}

---

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

在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;
            }
        );
    }
);

MaterialApp(
...
生成器：（上下文，子对象）{
返回流生成器(
流：InternetConnectionService（）.connectionStatusController.stream，
生成器：（上下文，快照）{
最终conenctivityResult=snapshot.data；
如果（connectivityResult==connectivityResult.none | | connectivityResult==null）返回NoInternetScreen（）；
返回儿童；
}
);
}
);

现在，您不必在其他文件中添加任何internet逻辑。您只需编写构建方法，将它们排除在外。

class ConnectivityUtils{
   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;
      }
}

静态连接（）异步{
bool-haswiki=false；
bool hasMobileConnection=false；
var connectivityResult=await（Connectivity（）.checkConnectivity（））；
if（connectivityResult==connectivityResult.mobile）{
hasMobileConnection=true；
}else if（connectivityResult==connectivityResult.wifi）{
hasWifi=真；
}
返回hasWifi | | hasMobileConnection；
}
}

您可以使用这个类，并且可以在调用API之前调用

hasConnection（）

---

如果为false，您可以显示无连接屏幕

难道您不能将

检查连接

放入主文件吗？是的，我可以在@JohnJoe执行此操作。在这种情况下，它可以在任何位置执行？我必须如何执行？您可以显示示例吗？是的，可以在任何位置执行。只需将您在每个屏幕上提供的小部件构建代码用于主文件。