Flutter中Html Widget无法加载Iframe内容的问题求助

问题场景 #

Flutter 3.3.3环境下，使用flutter_html: ^3.0.0-alpha.6的Html组件渲染包含HTML标签与iframe嵌入视频的文章内容时，组件仅显示短暂加载圈后无任何内容呈现。待渲染的示例HTML代码如下：

<h3>View more</h3>
<p>This is a sample code for article and video inside artcle body</p>
<div class="h_iframe-aparat_embed_frame">
  <span style="display: block;padding-top: 57%"></span>
  <iframe src="https://www.aparat.com/video/video/embed/videohash/q0IdU/vt/frame" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>
<p>Click to view more video</p>

解决步骤 #

1. 启用iframe渲染扩展 #

该alpha版本的flutter_html默认未开启iframe渲染支持，需在组件配置中添加IFrameHtmlExtension：

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/iframe.dart';

// 渲染HTML的代码
Html(
  data: yourArticleHtml, // 替换为实际的文章HTML内容
  extensions: const [
    IFrameHtmlExtension(),
  ],
)

2. 修复容器样式解析问题 #

示例HTML中的div.h_iframe-aparat_embed_frame使用了比例布局的padding-top样式，flutter_html可能无法正确识别导致容器高度为0，需手动指定样式：

Html(
  data: yourArticleHtml,
  extensions: const [
    IFrameHtmlExtension(),
  ],
  style: {
    "div.h_iframe-aparat_embed_frame": Style(
      position: Position.relative,
      height: 0,
    ),
    "div.h_iframe-aparat_embed_frame iframe": Style(
      position: Position.absolute,
      top: 0,
      left: 0,
      width: Width(100, Unit.percent),
      height: Height(100, Unit.percent),
    ),
  },
)

3. 确认网络权限 #

检查安卓项目的AndroidManifest.xml，确保添加了网络访问权限：

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

4. 尝试降级到稳定版本 #

若alpha版本仍存在兼容性问题，可降级flutter_html至稳定版（如^2.2.1），稳定版对iframe的支持更完善，配置示例：

import 'package:flutter_html/flutter_html.dart';

Html(
  data: yourArticleHtml,
  iframe: const IFrameOptions(
    allowFullscreen: true,
  ),
)

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