Flutter webview_flutter返回键失效 无法回退直接退出页面咨询

当前实现存在两个核心问题导致返回键异常：

1. 代码采用无状态结构直接内嵌WebView组件，未持有WebView控制器实例，无法调用网页历史回退相关API
2. 未对设备实体返回键事件做拦截，默认返回键触发时会直接执行Flutter路由的pop逻辑退出当前页面，不会触发WebView的历史回退
   注意：webview_flutter插件本身不会自动接管系统返回事件，必须手动实现拦截、回退判断逻辑。

• 将承载WebView的页面改为StatefulWidget，通过onWebViewCreated回调获取并存储WebViewController实例
• 使用WillPopScope组件包裹WebView作为外层容器，拦截系统返回按键事件
• 在WillPopScope的onWillPop回调中，先调用控制器的canGoBack()方法判断是否存在可回退的网页历史：存在历史则调用goBack()执行网页回退，同时拦截页面退出逻辑；无历史记录时再放行返回事件，允许退出页面
• 移除WebView组件上的const修饰，避免回调无法正常触发

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

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: WebViewPage(),
  ));
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(toolbarHeight: 0),
      body: WillPopScope(
        onWillPop: () async {
          final bool canBackToHistory = await _webViewController.canGoBack();
          if (canBackToHistory) {
            _webViewController.goBack();
            return false;
          }
          return true;
        },
        child: WebView(
          initialUrl: "https://www.example.com",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (controller) {
            _webViewController = controller;
          },
        ),
      ),
    );
  }
}

• 如果你使用的是webview_flutter 4.x及以上的新版本，核心逻辑完全一致，仅部分API命名有小幅调整，替换对应API即可
• 若部分安卓机型出现拦截失效，检查原生MainActivity中是否重写了onBackPressed方法且未将返回事件正常传递给Flutter层

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