Flutter WebView无网络状态页面实现：带图片与刷新按钮

步骤1：添加依赖 #

在pubspec.yaml中引入网络监听和WebView相关依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0
  connectivity_plus: ^5.0.1

步骤2：完整实现代码 #

以下是整合了网络状态监听、无网络页面和WebView功能的完整代码：

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

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

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late WebViewController _webViewController;
  bool _isConnected = true;
  late StreamSubscription<ConnectivityResult> _connectivitySubscription;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse("https://artsify.in"));

    // 监听网络状态变化
    _connectivitySubscription = Connectivity().onConnectivityChanged.listen((result) {
      setState(() {
        _isConnected = result != ConnectivityResult.none;
        // 网络恢复时自动重载页面
        if (_isConnected) _webViewController.reload();
      });
    });

    // 初始化时检查当前网络状态
    _checkInitialConnectivity();
  }

  Future<void> _checkInitialConnectivity() async {
    final result = await Connectivity().checkConnectivity();
    setState(() => _isConnected = result != ConnectivityResult.none);
  }

  @override
  void dispose() {
    _connectivitySubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 有网络时显示WebView
          if (_isConnected) WebViewWidget(controller: _webViewController),
          // 无网络时显示状态页面
          if (!_isConnected)
            Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 替换为你的无网络状态图片
                  Image.asset(
                    'assets/no_internet.png',
                    width: 200,
                    height: 200,
                  ),
                  const SizedBox(height: 20),
                  const Text(
                    "无网络连接",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10),
                  const Text("请检查网络设置后重试"),
                  const SizedBox(height: 30),
                  // 刷新按钮
                  ElevatedButton(
                    onPressed: () async {
                      final result = await Connectivity().checkConnectivity();
                      setState(() {
                        _isConnected = result != ConnectivityResult.none;
                        if (_isConnected) _webViewController.reload();
                      });
                    },
                    child: const Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(Icons.refresh),
                        SizedBox(width: 8),
                        Text("刷新"),
                      ],
                    ),
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}

关键说明 #

• 网络状态监听：通过connectivity_plus包实时监听网络变化，初始化阶段也会主动检查当前网络状态
• 无网络页面展示：检测到无网络时，显示包含状态图、提示文本和刷新按钮的页面，通过Stack实现页面切换
• 刷新功能：点击刷新按钮会重新检查网络，若网络恢复则自动重载WebView页面
• 图片资源配置：将assets/no_internet.png替换为你的无网络状态图，并在pubspec.yaml中配置资源路径：

  assets:
    - assets/no_internet.png
  

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