Flutter Web中WebView报错PlatformException，如何正常显示WebView？

你遇到的PlatformException(Unregistered factory, No factory registered for viewtype 'plugins.flutter.io/webview', null)错误，本质是因为官方原生的webview_flutter插件最初只支持移动端，在Web环境下没有对应的视图工厂实现，所以会抛出这个注册失败的异常。下面给你两种可行的解决思路：

方案一：使用官方Web适配插件（推荐） #

现在官方已经推出了webview_flutter_web来支持Web端，只需要简单配置就能直接用熟悉的WebView组件：

1. 添加依赖
   在你的pubspec.yaml中同时添加两个包：

   dependencies:
     webview_flutter: ^4.4.0  # 核心WebView包，确保版本足够新
     webview_flutter_web: ^0.2.2+1  # Web端适配包
   

   执行flutter pub get安装依赖。

2. 编写示例代码
   和移动端用法几乎一致，直接使用WebViewController和WebViewWidget即可：

   import 'package:flutter/material.dart';
   import 'package:webview_flutter/webview_flutter.dart';
   
   class WebViewDemoPage extends StatefulWidget {
     const WebViewDemoPage({super.key});
   
     @override
     State<WebViewDemoPage> createState() => _WebViewDemoPageState();
   }
   
   class _WebViewDemoPageState extends State<WebViewDemoPage> {
     late final WebViewController _controller;
   
     @override
     void initState() {
       super.initState();
       // 初始化控制器并加载网页
       _controller = WebViewController()
         ..loadRequest(Uri.parse('https://example.com'));
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Flutter Web WebView')),
         body: WebViewWidget(controller: _controller),
       );
     }
   }
   

3. 注意事项

   • 确保你的Flutter SDK版本在3.0以上，新版本的webview_flutter已经整合了多端支持，无需额外配置web/index.html。
   • 运行时使用flutter run -d chrome（或其他目标浏览器）即可正常加载。

方案二：直接嵌入HTML iframe（适合简单场景） #

如果你的需求只是嵌入一个静态网页，不需要和WebView做复杂交互（比如JS调用、历史记录控制），可以直接利用Flutter Web的Web特性，通过iframe实现：

import 'dart:html' as html;
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

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

  @override
  Widget build(BuildContext context) {
    // 注册iframe视图
    ui.platformViewRegistry.registerViewFactory(
      'iframe-${targetUrl.hashCode}',
      (int viewId) => html.IFrameElement()
        ..width = '100%'
        ..height = '100%'
        ..src = targetUrl
        ..style.border = 'none', // 去掉边框
    );

    return SizedBox.expand(
      child: HtmlElementView(viewType: 'iframe-${targetUrl.hashCode}'),
    );
  }
}

这种方式更轻量，但缺少官方WebView插件提供的交互能力，适合简单场景使用。

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