如何在Flutter中不使用Webview组件显示HTML数学公式？

要在Flutter移动端渲染你提供的HTML中的数学公式且不依赖WebView，可以按以下步骤操作：

1. 解析HTML提取LaTeX公式 #

首先需要解析HTML结构，定位到包含数学公式的节点并提取LaTeX代码：

• 添加html包到pubspec.yaml，用于解析HTML内容。
• 遍历HTML节点，筛选出class为mathjax-equation的<div>元素，提取其中的LaTeX表达式（注意移除前后包裹的\(和\)，因为渲染包支持标准LaTeX格式）。

2. 用原生数学渲染包渲染公式 #

使用flutter_math_fork包实现原生公式渲染，这个包无需WebView，直接在Flutter组件中渲染LaTeX内容：

步骤1：添加依赖 #

在pubspec.yaml中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.4
  flutter_math_fork: ^0.6.0

步骤2：完整实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Math Formula Demo')),
        body: const MathFormulaDisplay(),
      ),
    );
  }
}

class MathFormulaDisplay extends StatelessWidget {
  const MathFormulaDisplay({super.key});

  // 你的原始HTML内容
  final String htmlContent = '''
<p>Here is my Html Text</p>
<p>hello</p>
<div class="mathjax-equation">
    \\(x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\)
</div>
''';

  List<Widget> _parseHtmlToWidgets() {
    final document = parse(htmlContent);
    final widgets = <Widget>[];

    for (final node in document.body!.nodes) {
      if (node is dom.Element) {
        // 处理普通段落文本
        if (node.localName == 'p') {
          widgets.add(
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: Text(node.text.trim()),
            ),
          );
        }
        // 处理数学公式节点
        else if (node.localName == 'div' && node.classes.contains('mathjax-equation')) {
          // 清理LaTeX代码，移除前后的\(和\)
          String latex = node.text.trim().replaceAll(RegExp(r'^\\\(|\\\)$'), '');
          widgets.add(
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12.0),
              child: Math.tex(
                latex,
                textStyle: const TextStyle(fontSize: 20),
              ),
            ),
          );
        }
      }
    }

    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: _parseHtmlToWidgets(),
        ),
      ),
    );
  }
}

额外说明 #

• 如果你的HTML包含更复杂的结构（如标题、列表），可以扩展_parseHtmlToWidgets方法来支持更多HTML标签的转换。
• flutter_math_fork支持绝大多数常用LaTeX语法，包括分数、根号、上下标、运算符等，能覆盖常见的数学公式需求。
• 注意HTML中的转义字符处理：原始HTML里的\\在Dart字符串中需要写成\\\\，解析后会自动还原为单个\供LaTeX使用。

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