如何在 Flutter 中安全解析并渲染 HTML 内容（含 SVG 支持）-html教程-PHP中文网

本文介绍在 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 语法（如内联

✅ 正确解法：组合使用 flutter_widget_from_html + flutter_svg

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

添加依赖（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 中的交由 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"></path></svg><br>
            @@##@@
          </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，即可构建高性能、高保真的富文本界面。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！