Flutter WebView应用无网络时显示弹窗并退出的实现求助

1. 加载前先做网络检查 #

在页面初始化阶段完成网络状态检测，避免WebView无效加载：

@override
void initState() {
  super.initState();
  _checkNetwork();
}

void _checkNetwork() async {
  // 调用Connectivity获取当前网络状态
  final connectivityResult = await Connectivity().checkConnectivity();
  setState(() {
    _isConnectionSuccessful = connectivityResult != ConnectivityResult.none;
  });

  // 无网络直接触发提示弹窗
  if (!_isConnectionSuccessful) {
    _showNoNetworkAlert();
  }
}

2. 实现无网络弹窗与退出逻辑 #

弹窗禁止用户点击空白关闭，确认后根据平台退出应用：

void _showNoNetworkAlert() {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (ctx) => AlertDialog(
      title: const Text('提示'),
      content: const Text('无网络连接'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(ctx);
            // 适配安卓/iOS退出方式
            if (Platform.isAndroid) {
              SystemNavigator.pop();
            } else if (Platform.isIOS) {
              exit(0);
            }
          },
          child: const Text('确定'),
        ),
      ],
    ),
  );
}

3. 控制WebView的渲染时机 #

仅当网络正常时渲染WebView，否则显示占位提示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _isConnectionSuccessful
        ? WebView(
            initialUrl: '你的目标网站地址',
            javascriptMode: JavascriptMode.unrestricted,
            // 其他WebView配置项
          )
        : const Center(child: Text('检测网络中...')),
  );
}

4. 可选：监听运行时网络变化 #

若需在应用使用过程中检测网络断开，添加状态监听：

late StreamSubscription<ConnectivityResult> _networkSubscription;

@override
void initState() {
  super.initState();
  _checkNetwork();
  // 监听网络状态实时变化
  _networkSubscription = Connectivity().onConnectivityChanged.listen((result) {
    setState(() {
      _isConnectionSuccessful = result != ConnectivityResult.none;
    });
    if (!_isConnectionSuccessful) {
      _showNoNetworkAlert();
    }
  });
}

@override
void dispose() {
  _networkSubscription.cancel(); // 销毁时取消监听，避免内存泄漏
  super.dispose();
}

注意事项

• 需导入dart:io和package:flutter/services.dart包以使用平台相关API
• 确保connectivity_plus（或你使用的Connectivity类包）已正确配置，比如AndroidManifest.xml中添加网络权限

内容的提问来源于stack exchange，提问作者mark_zuckerberg