Flutter webview应用无网络时splash screen显示无网提示的实现咨询

前置准备：添加依赖 #

在项目pubspec.yaml文件的dependencies节点下添加网络检测库：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^4.0.1 # 可替换为最新稳定版本
  webview_flutter: ^4.2.2 # 你已经用到的WebView依赖

添加后执行flutter pub get命令安装依赖。

权限配置 #

• 安卓端：在android/app/src/main/AndroidManifest.xml的manifest节点下添加权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• iOS端：在ios/Runner/Info.plist的dict节点下添加配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

核心逻辑实现 #

启动屏页面代码示例 #

import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:webview_flutter/webview_flutter.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool _hasNetwork = false;
  bool _isChecking = true;
  final String _targetUrl = "你要加载的目标网页地址";

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

  // 检测网络状态
  Future<void> _checkNetworkStatus() async {
    final connectivityResult = await (Connectivity().checkConnectivity());
    setState(() {
      _isChecking = false;
      if (connectivityResult == ConnectivityResult.none) {
        _hasNetwork = false;
      } else {
        _hasNetwork = true;
        // 有网络延迟500毫秒后跳转WebView页面
        Future.delayed(const Duration(milliseconds: 500), () {
          Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => WebViewPage(url: _targetUrl)));
        });
      }
    });
  }

  // 重试检测网络
  void _retryCheck() {
    setState(() {
      _isChecking = true;
    });
    _checkNetworkStatus();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isChecking 
            ? const CircularProgressIndicator() // 检测中显示加载动画
            : _hasNetwork 
                ? const Text("加载中...") 
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(Icons.wifi_off, size: 64, color: Colors.grey),
                      const SizedBox(height: 16),
                      const Text("无网络连接，请检查网络设置", style: TextStyle(fontSize: 16, color: Colors.grey)),
                      const SizedBox(height: 16),
                      ElevatedButton(
                        onPressed: _retryCheck,
                        child: const Text("重试"),
                      )
                    ],
                  ),
      ),
    );
  }
}

// WebView承载页面
class WebViewPage extends StatefulWidget {
  final String url;
  const WebViewPage({super.key, required this.url});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("应用名称")),
      body: WebViewWidget(controller: _controller),
    );
  }
}

逻辑说明 #

• 应用启动后先进入启动屏页面，自动触发网络状态检测
• 检测到无网络时，直接在启动屏展示无网络提示和重试按钮
• 检测到有网络时，自动跳转至WebView页面加载目标网页
• 如果需要更精准的网络可用性判断（避免连接到无网络的WiFi时判断错误），可以搭配internet_connection_checker库做实际的网络连通性校验。

内容的提问来源于stack exchange，提问作者Pack My Food