Flutter 中如何为 WebView 添加关闭返回按钮，解决 url_launcher 加载异常问题

问题原因 #

url_launcher 提供的 forceWebView 能力是对系统原生WebView的简易封装，存在两个硬限制：

• 底层配置固定，仅开放少量参数调整，默认关闭了大量JS相关权限、硬件加速能力，因此会出现加载慢、网页动画无法正常运行的问题
• 未开放WebView实例与布局自定义能力，无法手动添加顶部关闭按钮，安卓端默认仅支持系统返回键操作页面回退，无法直接关闭WebView返回应用页面

解决方案 #

直接替换为Flutter官方维护的 webview_flutter 组件实现自定义WebView页面，完全满足内嵌浏览、布局自定义、性能优化的需求，实现步骤如下：

1. 先在 pubspec.yaml 中添加依赖

dependencies:
  webview_flutter: ^4.4.0 # 可替换为最新稳定版本

2. 安卓端额外添加网络权限配置，在 android/app/src/main/AndroidManifest.xml 的 manifest 节点下新增：

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

3. 实现自定义WebView页面，自带顶部关闭按钮

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

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

  @override
  State<CustomWebViewPage> createState() => _CustomWebViewPageState();
}

class _CustomWebViewPageState extends State<CustomWebViewPage> {
  late final WebViewController webController;

  @override
  void initState() {
    super.initState();
    // 初始化WebView控制器，放开所有JS权限保证网页交互正常
    webController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.targetUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 自定义顶部导航栏，添加关闭按钮
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.close, size: 24),
          onPressed: () => Navigator.pop(context), // 点击直接关闭WebView返回原页面
        ),
        title: const Text("浏览页面"),
        // 可选：添加网页前进回退按钮
        actions: [
          IconButton(
            icon: const Icon(Icons.arrow_back_ios, size: 20),
            onPressed: () async {
              if (await webController.canGoBack()) {
                webController.goBack();
              }
            },
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward_ios, size: 20),
            onPressed: () async {
              if (await webController.canGoForward()) {
                webController.goForward();
              }
            },
          )
        ],
      ),
      body: WebViewWidget(controller: webController),
    );
  }
}

4. 替换原有点击跳转逻辑，直接跳转自定义WebView页面即可

onTap: () {
  final url = image.url;
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => CustomWebViewPage(targetUrl: url)),
  );
},

方案优势 #

• 性能远优于url_launcher的简易WebView封装，JS权限完全放开，网页动画、交互逻辑都可正常运行
• 布局完全自定义，除了关闭按钮外，还可按需添加加载进度条、错误重试页、分享按钮等功能
• 可直接操作WebViewController实例，支持Cookie管理、JS和Flutter双向通信等扩展能力

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