Flutter Web端WebView组件报错问题求助

问题场景 #

在Flutter Web中使用WebViewWidget加载网页时出现报错，核心实现代码如下：

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'webview',
      home: Scaffold(
        body: WebViewWidget(controller: WebViewController()
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..setBackgroundColor(const Color(0x00000000))
          ..setNavigationDelegate(
            NavigationDelegate(
              onProgress: (int progress) {
                // Update loading bar.
              },
              onPageStarted: (String url) {},
              onPageFinished: (String url) {},
              onWebResourceError: (WebResourceError error) {},
              onNavigationRequest: (NavigationRequest request) {
                if (request.url.startsWith('https://www.youtube.com/')) {
                  return NavigationDecision.prevent;
                }
                return NavigationDecision.navigate;
              },
            ),
          )
          ..loadRequest(Uri.parse('https://flutter.dev'))),
      ),
    );
  }

报错核心原因 #

Flutter Web环境下，webview_flutter默认仅支持移动端，Web端需要额外引入专用插件并配置页面脚本，否则会触发WebView初始化失败的报错。

解决步骤 #

1. 添加Web端依赖 #

在项目的pubspec.yaml中补充WebView的Web端实现依赖，确保版本与主插件匹配：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 替换为最新稳定版
  webview_flutter_web: ^0.2.2+1 # Web端专用实现，版本需与webview_flutter对应

执行flutter pub get完成依赖安装。

2. 配置Web端index.html #

在项目根目录的web/index.html中，添加WebView运行所需的脚本支持：
在<head>标签内插入以下代码：

<script src="https://unpkg.com/@dart-lang/web@0.5.1/dist/dart_web.js"></script>
<script type="application/javascript">
  window.flutterWebViewPlugin = {
    registerHandler: function(handlerName, callback) {
      window.addEventListener('message', function(event) {
        if (event.data.handlerName === handlerName) {
          callback(event.data.data);
        }
      });
    },
    callHandler: function(handlerName, data) {
      window.parent.postMessage({handlerName: handlerName, data: data}, '*');
    }
  };
</script>

3. 优化控制器初始化逻辑（可选） #

将WebViewController的初始化移至initState中，避免在build方法中重复创建实例，提升Web端稳定性：

late final WebViewController controller;

@override
void initState() {
  super.initState();
  controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {},
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse('https://flutter.dev'));
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'webview',
    home: Scaffold(
      body: WebViewWidget(controller: controller),
    ),
  );
}

4. 检查浏览器环境 #

使用Chrome、Edge等现代浏览器测试，避免开启严格隐私模式（部分浏览器隐私设置会阻止WebView加载第三方内容）。

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