Flutter WebView仅在最后一页显示退出确认弹窗问题

要实现仅在WebView处于初始页面时显示退出确认弹窗，核心是拦截系统返回事件，先判断WebView是否还能返回上一页，再决定是否触发退出弹窗。具体步骤如下：

1. 在WebView组件中暴露返回状态判断方法 #

修改你的web_view.dart，给WebView控制器添加可被父组件调用的方法，用于判断当前是否能返回上一页：

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

class MyWebView extends StatefulWidget {
  final String initialUrl;
  const MyWebView({super.key, required this.initialUrl});

  @override
  State<MyWebView> createState() => _MyWebViewState();

  // 暴露给父组件的方法：判断WebView是否能返回上一页
  Future<bool> canGoBack() async {
    return _MyWebViewState.webController?.canGoBack() ?? false;
  }

  // 暴露给父组件的方法：让WebView返回上一页
  void goBack() {
    _MyWebViewState.webController?.goBack();
  }
}

class _MyWebViewState extends State<MyWebView> {
  static WebViewController? webController;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: widget.initialUrl,
      onWebViewCreated: (controller) {
        webController = controller;
      },
      // 保留你的其他WebView配置（比如JavaScript启用、导航委托等）
    );
  }
}

2. 在Home页拦截返回事件并处理逻辑 #

修改home.dart，使用WillPopScope包裹页面，拦截系统返回按键，根据WebView的返回状态决定行为：

import 'package:flutter/material.dart';
import 'web_view.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final MyWebView _webView = const MyWebView(initialUrl: "https://你的初始网址.com");

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 先检查WebView是否能返回上一页
        bool canWebGoBack = await _webView.canGoBack();
        
        if (canWebGoBack) {
          // WebView还有历史页面，让它自己返回，不触发退出弹窗
          _webView.goBack();
          return false; // 阻止系统默认的返回退出行为
        } else {
          // WebView已经在初始页面，弹出退出确认弹窗
          bool? confirmExit = await showDialog(
            context: context,
            barrierDismissible: false,
            builder: (context) => AlertDialog(
              title: const Text("确认退出"),
              content: const Text("确定要退出应用吗？"),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(context, false),
                  child: const Text("取消"),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, true),
                  child: const Text("确定"),
                ),
              ],
            ),
          );
          return confirmExit ?? false;
        }
      },
      child: Scaffold(
        body: _webView,
        // 保留你的其他页面布局（比如底部导航栏等）
      ),
    );
  }
}

关键逻辑说明 #

• 拦截返回事件：WillPopScope会拦截Android的物理返回键和iOS的左滑返回事件，让我们可以自定义处理逻辑。
• 判断WebView状态：通过调用WebView暴露的canGoBack()方法，确认当前是否处于初始页面（无历史页面可返回）。
• 分流处理：
  • 若WebView能返回，则调用goBack()让WebView回到上一页，同时返回false阻止系统退出应用。
  • 若WebView不能返回，则弹出确认弹窗，根据用户选择决定是否退出应用。

如果使用的是flutter_inappwebview等第三方WebView库，核心逻辑完全一致，仅需调整canGoBack()和goBack()的调用方式（比如对应controller.canGoBack()和controller.goBack()）。

内容的提问来源于stack exchange，提问作者Ayush Ranjan Rout