如何在Flutter Chrome应用中用webview_flutter_web显示自定义HTML而非外部URI

要在webview_flutter_web中加载动态构建的HTML，你不需要使用loadRequest（该方法用于加载URI地址），而是直接调用PlatformWebViewController提供的loadHtmlString方法，传入你动态生成的HTML字符串即可。

核心修改示例 #

先替换控制器初始化部分的代码，把原来的loadRequest换成loadHtmlString：

final PlatformWebViewController _controller = PlatformWebViewController(
  const PlatformWebViewControllerCreationParams(),
)..loadHtmlString(
  // 这里是你动态构建的HTML内容
  '<html><body><h1 style="color:blue;">Hello World</h1><p>这是代码生成的动态HTML</p></body></html>',
);

完整修改代码（含动态切换HTML功能） #

如果需要支持触发加载不同的动态HTML内容，可以调整菜单逻辑，比如添加选项切换不同的动态页面：

final PlatformWebViewController _controller = PlatformWebViewController(
  const PlatformWebViewControllerCreationParams(),
)..loadHtmlString(
  '<html><body><h1>初始动态页面</h1></body></html>',
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter WebView 动态HTML示例'),
      actions: <Widget>[
        _SampleMenu(_controller),
      ],
    ),
    body: PlatformWebViewWidget(
      PlatformWebViewWidgetCreationParams(controller: _controller),
    ).build(context),
  );
}

enum _MenuOptions {
  loadHelloWorld,
  loadDynamicDataHtml,
}

class _SampleMenu extends StatelessWidget {
  const _SampleMenu(this.controller);

  final PlatformWebViewController controller;

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<_MenuOptions>(
      onSelected: (_MenuOptions value) {
        switch (value) {
          case _MenuOptions.loadHelloWorld:
            _loadHelloWorldHtml(controller);
            break;
          case _MenuOptions.loadDynamicDataHtml:
            _loadDynamicDataHtml(controller);
            break;
        }
      },
      itemBuilder: (BuildContext context) => <PopupMenuItem<_MenuOptions>>[
        const PopupMenuItem<_MenuOptions>(
          value: _MenuOptions.loadHelloWorld,
          child: Text('加载Hello World'),
        ),
        const PopupMenuItem<_MenuOptions>(
          value: _MenuOptions.loadDynamicDataHtml,
          child: Text('加载带动态数据的HTML'),
        ),
      ],
    );
  }

  Future<void> _loadHelloWorldHtml(PlatformWebViewController controller) async {
    final String htmlContent = '''
    <html>
      <head>
        <style>
          body { text-align: center; font-family: sans-serif; }
          h1 { color: #2196F3; }
        </style>
      </head>
      <body>
        <h1>Hello World!</h1>
        <p>这是完全通过代码生成的HTML页面</p>
      </body>
    </html>
    ''';
    await controller.loadHtmlString(htmlContent);
  }

  Future<void> _loadDynamicDataHtml(PlatformWebViewController controller) async {
    // 模拟从业务逻辑中获取的动态数据
    String userNickname = 'Flutter开发者';
    String currentTime = DateTime.now().toString().split('.')[0];
    
    // 拼接动态HTML字符串
    final String htmlContent = '''
    <html>
      <body>
        <h3>动态数据展示</h3>
        <p>用户昵称：$userNickname</p>
        <p>当前时间：$currentTime</p>
      </body>
    </html>
    ''';
    await controller.loadHtmlString(htmlContent);
  }
}

关键说明 #

• loadHtmlString直接接收HTML字符串参数，无需依赖外部URI，完全适配动态构建的场景。
• 你可以通过字符串拼接、模板语法（复杂场景下）生成任意结构的HTML，包括插入动态变量、自定义样式、脚本等。
• 如果需要加载包含外部资源（如远程CSS、JS）的动态HTML，直接在HTML字符串中使用完整URL引用即可。

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