flutter 中的互聯網連接

Question

如何在 flutter 中實現對整個應用程序的持續互聯網連接檢查，我幾乎完整的應用程序，現在我需要添加互聯網連接檢查，請幫助，提前謝謝

  @override
  Widget build(BuildContext context) {
      return StreamBuilder<ConnectivityResult>(
          stream: connectivityStream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final connectivityResult = snapshot.data;
              if (connectivityResult == ConnectivityResult.none) {
                return MaterialApp(
                  debugShowCheckedModeBanner: false,
                  home: NoInternetConnectionScreen(),
                );
              }
              return MaterialApp(
                debugShowCheckedModeBanner: false,
                home: SplashScreen(),
                routes: routes,
              );

            } else if (snapshot.hasError) {

              return MaterialApp(
                debugShowCheckedModeBanner: false,
                home: NoInternetConnectionScreen(),
              );
            }

            return Center(child: CircularProgressIndicator());
          }
      );
  }

Answer 1

連接插件在其文檔中聲明它僅在有網絡連接時提供信息，而不在網絡連接到 Internet 時提供信息

請注意，在 Android 上，這並不能保證連接到 Internet。 例如，該應用程序可能具有 wifi 訪問權限，但它可能是無法訪問的 VPN 或酒店 WiFi。

您可以使用

import 'dart:io';
...
try {
  final result = await InternetAddress.lookup('google.com');
  if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
    print('connected');
  }
} on SocketException catch (_) {
  print('not connected');
}

Answer 2

我認為最好的做法是使用連接插件並將您的應用程序包裝在流構建器中

https://pub.dev/packages/connectivity

您的主屏幕/主頁應該是這樣的：

class MainScreen extends StatelessWidget {

  Stream connectivityStream = Connectivity().onConnectivityChanged;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppStyle.backgroundColor,
      body: StreamBuilder<ConnectivityResult>(
        stream: connectivityStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final connectivityResult = snapshot.data;

            if (connectivityResult == ConnectivityResult.none) {
              return NoConnectionPage();
            }
            return HomePage();

          } else if (snapshot.hasError) {

            return NoConnectionPage(); 
            // or some error page, but I think no connection page is what you
            // want here
          } 

          return Center(child: CircularProgressIndicator());
        }
      )
    );
  }
}

在 NoConnectionPage() 中，您可以使用一個按鈕來使用如下方法重試連接：

void _retryConnection() async {
      try {
        final result = await InternetAddress.lookup('example.com');
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        print('connected');
        Navigator.of(context).pop(); // going back to MainScreen()
      }
    } on SocketException catch (_) {
      print('not connected');
    }
  }

Answer 3

只需像這樣使用internet_connectivity_checker package：

class Hello extends StatelessWidget {
  const Hello({super.key});

  @override
  Widget build(BuildContext context) {
    return internetConnectivityBuilder(
      (status) {
        bool connected = status == ConnectivityStatus.online;
        return Text(connected ? "Online" : "Offline");
      },
    );
  }
}

在此處獲取有關此 package 的更多信息。