Flutter 如果沒有“Internet 連接”則顯示對話框

Question

我是 Flutter 開發的初學者，我正在創建一個 webview 應用程序來將我的響應式網站加載到應用程序中。 一切正常，但如果沒有互聯網連接，我需要顯示一個對話框，顯示“沒有互聯網連接”。

我的代碼：

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = true;
  ConnectivityResult? _connectivityResult;
  late StreamSubscription _connectivitySubscription;
  bool? _isConnectionSuccessful;

  @override
  initState() {
    super.initState();

    _connectivitySubscription = Connectivity()
        .onConnectivityChanged
        .listen((ConnectivityResult result) {
      print('Current connectivity status: $result');
      setState(() {
        _connectivityResult = result;
      });
    });
  }

  @override
  dispose() {
    super.dispose();

    _connectivitySubscription.cancel();
  }

  Future<void> _checkConnectivityState() async {
    final ConnectivityResult result = await Connectivity().checkConnectivity();
    if (result == ConnectivityResult.wifi) {
      print('Connected to a Wi-Fi network');
    } else if (result == ConnectivityResult.mobile) {
      print('Connected to a mobile network');
    } else {
      print(result);
    }

    setState(() {
      _connectivityResult = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        WebView(
          javascriptMode: JavascriptMode.unrestricted,
          // initialUrl: '',
          onWebViewCreated: (WebViewController controller) async {
            await WebviewCookieManager().setCookies([
              Cookie('SESSION-Test', 'token')
                ..domain = 'dobuyme.online'
                ..httpOnly = true
            ]);

            controller.loadUrl('https://example.com/source=web_view');
          },
          onPageFinished: (String url) {
            setState(() {
              isLoading = false;
            });
          },

          // onPageFinished: (finish) {
          //   setState(() {
          //     var isLoading = false;
          //   });
          // },
        ),
        isLoading
            ? const Center(
                child: CircularProgressIndicator(),
              )
            : Stack(),
      ],
    );
  }
}

如果連接成功，此變量將為“true”

_isConnectionSuccessful

但我不知道如何使用 webview 來 append 並在網站加載之前檢查連接。 我想顯示一條消息“無互聯網連接”並關閉應用程序。

請任何人都可以提供幫助。 我？

謝謝

Answer 1

使用internet_connection_checker: ^0.0.1+4插件檢查互聯網是否可用...

final StreamSubscription<InternetConnectionStatus> listener =
      InternetConnectionChecker().onStatusChange.listen(
    (InternetConnectionStatus status) {
      switch (status) {
        case InternetConnectionStatus.connected:
          // Do what you want to do
          break;
        case InternetConnectionStatus.disconnected:
          // Do what you want to do
          break;
      }
    },
  );

在這里您可以找到狀態....並在狀態斷開連接時顯示對話框