Flutter LaTeX渲染插件 tex 的使用

tex 是一个轻量级的 TeX 引擎，可以从 TeX 字符串生成 SVG 图像。目前，它仅支持数学环境（例如 $ f(x) = x^2 $）。与其他 TeX 渲染器不同，这个包不依赖于 JavaScript 或任何其他运行时依赖项。

主要功能

• 从 TeX 源代码生成 SVG 图像。
• 所有数据都打包在代码中，不需要在运行时加载任何内容。

开始使用

首先，在你的 pubspec.yaml 文件中添加 tex 包：

dependencies:
  tex: ^1.0.2

确保使用 pub.dev 上的最新版本。

使用示例

以下示例展示了如何从 TeX 字符串创建 SVG 图像数据字符串：

import 'package:tex/tex.dart';

void main() {
  // 设置要渲染的方程
  var src = "\\sum_{k=1}^n \\frac{1}{k(k+1)} = \\frac{n}{n+1}";
  // 实例化 tex
  var tex = TeX();
  // 设置 RGB 颜色 (红色)
  tex.setColor(157, 59, 50); 
  // 设置缩放因子
  tex.scalingFactor = 2.0;
  // 创建 SVG 数据
  var svgImageData = tex.tex2svg(src, displayStyle: true);
  // 检查错误
  if (tex.success()) {
    // 输出 "<svg ...";
    print(svgImageData);
  } else {
    // 错误处理
    print('Errors occurred: ${tex.error}');
  }
}

输出的 SVG 图像如下所示：

在 Flutter 中使用

要在 Flutter 应用中使用 tex 插件来渲染 LaTeX 公式，你可以结合 flutter_svg 插件来显示 SVG 图像。以下是完整的示例 demo：

完整的 Flutter 示例 Demo

import 'package:flutter/material.dart';
import 'package:tex/tex.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter LaTeX Rendering with tex'),
        ),
        body: Center(
          child: LatexWidget(),
        ),
      ),
    );
  }
}

class LatexWidget extends StatefulWidget {
  @override
  _LatexWidgetState createState() => _LatexWidgetState();
}

class _LatexWidgetState extends State<LatexWidget> {
  Widget? equationWidget;

  @override
  void initState() {
    super.initState();
    loadEquation();
  }

  void loadEquation() async {
    // 实例化 TeX
    var tex = TeX();
    // 设置缩放因子
    tex.scalingFactor = 1.1;
    // 创建 SVG 数据
    var texSrc = "\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}";
    var svg = tex.tex2svg(texSrc);

    if (tex.success()) {
      setState(() {
        equationWidget = WidgetSpan(
          alignment: PlaceholderAlignment.middle,
          child: SvgPicture.string(svg, width: tex.width.toDouble()),
        );
      });
    } else {
      setState(() {
        equationWidget = TextSpan(
          text: tex.error,
          style: TextStyle(color: Colors.red),
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        children: [
          TextSpan(text: "The equation is: ", style: TextStyle(fontSize: 18)),
          equationWidget ?? TextSpan(text: "Loading..."),
        ],
      ),
    );
  }
}

解释

• 导入必要的包：我们导入了 tex 和 flutter_svg 包来处理 LaTeX 渲染和 SVG 显示。
• 初始化 TeX 对象：创建了一个 TeX 对象，并设置了缩放因子。
• 生成 SVG：通过 tex2svg 方法将 LaTeX 字符串转换为 SVG 格式。
• 显示 SVG：使用 SvgPicture.string 来显示生成的 SVG 图像。

运行效果

该应用会在屏幕中央显示一个包含积分公式的文本块，并将 LaTeX 公式以 SVG 形式嵌入其中。

注意：此插件仍在开发中，更多 TeX 宏将在未来支持。如果你需要进一步的帮助或遇到问题，请参考官方文档或 GitHub 仓库中的示例代码。