Flutter WebView返回按钮异常：点击直接退出应用求解决方案

你的代码没有处理WebView的导航历史，也没拦截系统返回按钮的事件，所以点击返回会直接退出应用。以下是适配最新Flutter版本的修复代码：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'WebView Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 检查WebView是否可以后退
        if (await _webViewController.canGoBack()) {
          _webViewController.goBack();
          return false; // 阻止默认的返回退出行为
        } else {
          return true; // 没有历史记录时，允许退出应用
        }
      },
      child: Scaffold(
        body: WebView(
          initialUrl: 'https://flutter.dev',
          onWebViewCreated: (controller) {
            _webViewController = controller;
          },
          javascriptMode: JavascriptMode.unrestricted, // 可选，根据网页需求开启JS支持
        ),
      ),
    );
  }
}

关键修改说明： #

• WebViewController实例：保存WebView的控制器，用来查询导航历史和执行后退操作
• WillPopScope组件：拦截系统返回按钮的点击事件，自定义处理逻辑
• onWillPop回调：先通过canGoBack()判断WebView是否有可后退的页面，有则调用goBack()执行网页后退，返回false阻止默认退出；没有历史记录时返回true，允许退出应用

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