Flutter中Html组件无法完整渲染：表格及图片不显示问题

1. 先配好正确的依赖 #

在pubspec.yaml里加上最新版的flutter_html包：

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^3.0.0-beta.2 # 换成当前最新的稳定版本即可

然后执行flutter pub get安装依赖。

2. 开启表格渲染扩展 #

默认flutter_html不会自动渲染表格，得手动添加TableExtension：

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/src/extensions/table_extension.dart';

// 渲染HTML的代码
Html(
  data: detail.matter,
  extensions: [
    TableExtension(), // 开启这个才能显示表格
  ],
)

如果表格需要自定义样式（比如边框、内边距），可以这么配置：

Html(
  data: detail.matter,
  extensions: [
    TableExtension(
      tableStyle: TableStyle(
        border: Border.all(color: Colors.grey),
        cellPadding: EdgeInsets.all(8),
      ),
    ),
  ],
)

3. 解决图片空白问题 #

图片空白大多是未启用图片处理扩展，添加ImageExtension并配置相关参数：

import 'package:flutter_html/src/extensions/image_extension.dart';

Html(
  data: detail.matter,
  extensions: [
    TableExtension(),
    ImageExtension(
      loadingWidget: (context, url) => const CircularProgressIndicator(),
      errorWidget: (context, url, error) => const Icon(Icons.error),
    ),
  ],
  // 让图片适配屏幕宽度
  style: {
    "img": Style(
      maxWidth: MaxWidth.fitContent(),
      height: Height.auto(),
    ),
  },
)

如果添加后仍空白，先直接在浏览器打开图片链接确认是否可访问。如果是自签名HTTPS链接，需要在Android的AndroidManifest.xml和iOS的Info.plist中配置允许不安全连接。

额外提醒 #

• 检查HTML里的表格标签是否为标准的<table>、<tr>、<td>结构，避免不规范的嵌套或标签写法。
• 若使用的是旧版本flutter_html（比如1.x系列），API逻辑不同，建议升级到新版以获得更好的兼容性。

内容的提问来源于stack exchange，提问作者Inam ur Rahman