本文介绍在 Flutter 中不依赖 WebView 的前提下，高效解析与渲染 HTML 字符串的方法，重点解决 flutter_widget_from_html 对复杂 SVG 渲染失败的问题，并通过集成 flutter_svg 实现原生级 SVG 支持。
本文介绍在 flutter 中不依赖 webview 的前提下，高效解析与渲染 html 字符串的方法，重点解决 `flutter_widget_from_html` 对复杂 svg 渲染失败的问题，并通过集成 `flutter_svg` 实现原生级 svg 支持。
在 Flutter 开发中，直接渲染富文本 HTML 是常见需求（如后台返回的带格式说明、图文混排内容），但原生 SDK 并不支持 HTML 解析。社区主流方案是使用 flutter_widget_from_html（简称 FWFH），它将 HTML 字符串转换为 Flutter Widget 树，无需 WebView 即可实现轻量、可控、可定制的渲染。
然而，FWFH 默认仅支持基础 SVG 语法（如内联 <svg> 标签中的简单路径），对包含外部资源引用、CSS 样式、渐变、滤镜或嵌套 <use> 的复杂 SVG 文件常出现空白、崩溃或样式丢失。这是因为其内置 SVG 渲染器基于 flutter_svg 的早期简化封装，未启用完整能力。
✅ 正确解法：组合使用 flutter_widget_from_html + flutter_svg
-
添加依赖（pubspec.yaml）：
立即学习“前端免费学习笔记（深入）”；
dependencies: flutter_widget_from_html: ^0.9.0 # 推荐使用最新稳定版（如 0.9.x） flutter_svg: ^2.0.7 # 确保版本 ≥ 2.0.0（支持完整 SVG 1.1+ 特性）
启用 SVG 渲染插件（关键步骤）
从 v0.9.0 起，FWFH 提供了可插拔的 WidgetFactory 机制。需显式注册 SvgWidgetFactory，让 HTML 中的 <svg> 和 <img src="*.svg"> 交由 flutter_svg 处理：
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:flutter_widget_from_html/core.dart';
import 'package:flutter_svg/flutter_svg.dart';
class HtmlWithSvgPage extends StatelessWidget {
@override
Widget build(BuildContext context) => HtmlWidget(
// 示例 HTML（含内联 SVG 和 SVG 图片）
r'''
<div>
<h3>产品图标</h3>
<svg width="48" height="48" viewBox="0 0 24 24">
<path fill="#4285F4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<br/>
<img src="assets/icons/logo.svg" width="64" height="64" />
</div>
''',
factoryBuilder: () => _MyWidgetFactory(),
);
}
class _MyWidgetFactory extends WidgetFactory {
@override
Widget buildSvg(
BuildContext context,
String svgString, {
double? width,
double? height,
BoxFit fit = BoxFit.contain,
}) {
return SvgPicture.string(
svgString,
width: width,
height: height,
fit: fit,
placeholderBuilder: (context) => const SizedBox.shrink(),
errorBuilder: (context, error, stackTrace) =>
const Icon(Icons.error_outline, color: Colors.red),
);
}
@override
Widget buildImage(
BuildContext context,
String url, {
double? width,
double? height,
BoxFit fit = BoxFit.contain,
}) {
if (url.toLowerCase().endsWith('.svg')) {
return SvgPicture.network(
url,
width: width,
height: height,
fit: fit,
placeholderBuilder: (context) => const CircularProgressIndicator(),
errorBuilder: (context, error, stackTrace) =>
const Icon(Icons.broken_image, color: Colors.grey),
);
}
return super.buildImage(context, url, width: width, height: height, fit: fit);
}
}⚠️ 注意事项：
- ✅ 必须重写 buildSvg() 和 buildImage()（针对 .svg 后缀）以触发 flutter_svg；
- ✅ 使用 SvgPicture.string() 渲染内联 SVG，SvgPicture.network() / SvgPicture.asset() 渲染外部 SVG；
- ❌ 避免在 HtmlWidget 中直接传入超大 SVG 字符串（影响解析性能），建议拆分为独立资源文件；
- ? 若需支持 data:image/svg+xml;base64,... 编码，需额外解析 Base64 并传入 SvgPicture.string()；
- ? 网络 SVG 需确保服务端配置 CORS，或使用 httpHeaders（flutter_svg v2.0+ 支持）。
总结：flutter_widget_from_html 是 HTML 渲染的坚实基础，而 flutter_svg 是 SVG 渲染的事实标准。二者通过 WidgetFactory 深度协同，既保留了 HTML 解析的灵活性，又获得专业级 SVG 支持——无需 WebView，即可构建高性能、高保真的富文本界面。
