Flutter Math：如何使用纯 Flutter 渲染 LaTeX 数学公式

介绍一下我开发的一个 Flutter 插件：Flutter Math，最近刚刚发布了 0.2.0 版。Flutter Math 是一个完全使用 Dart 和 Flutter 渲染 LaTeX 数学公式的插件，可以看作是移植在 Dart 和 Flutter 平台上的 KaTeX 。其支持的 LaTeX 语法大致与 KaTeX 相同（少数当前版本暂不支持的语法详见 Github 仓库），对数学公式的渲染结果几乎像素级还原 KaTeX 。

相比已有的 flutter_tex 插件，本插件完全的基于 Dart 和 Flutter，不包含任何 WebView 和 Javascript，性能远超过 flutter_tex 。大家如果频繁遇到 flutter_tex 带来的卡顿以及崩溃，欢迎试用 Flutter Math 。所有的组件都同时支持手机端和 Web 端[^1],[^2]。可以在此查看 Web 端效果 Flutter Math Demo

渲染样例

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

二次方程解

i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)

薛定谔方程

\hat f(\xi) = \int_{-\infty}^\infty f(x)e^{- 2\pi i \xi x}\mathrm{d}x

傅里叶变换

使用方法

在 pubspec.yaml 文件中添加对flutter_math的依赖
在代码中使用Math.tex(expression)组件展示渲染结果。可以通过提供可选参数mathStyle和textStyle控制公式样式，onErrorFallback自定义输入错误时如何展示报错信息。样例如下
```
Math.tex(
  r'\frac a b',
  mathStyle: MathStyle.text, // 行内公式
  textStyle: TextStyle(fontSize: 42),
)
```

0.2.0 版本新加入可选择版本SelectableMath，基本与 Flutter 自带的SelectableText效果相同。

项目仓库地址：GitHub 地址。目前版本为 0.1.4，更多信息以及暂不支持的 KaTeX 特性欢迎查阅 GitHub 页面。欢迎打星，欢迎 fork ！

[^1]: Web 端 debug 可能会出现栈溢出错误，这是一个已知 Dart 编译器 bug 并且短期内 stable/beta 通道修复可能性较小。请升级到带有 Dart2.11.0-254.0.dev 或更高版本的 Flutter 。

[^2]: Web 端部分符号右侧渲染不全，这是目前 Flutter 的 DomCanvas 后端自身 bug，暂无解决办法。

Flutter Math：如何使用纯 Flutter 渲染 LaTeX 数学公式

gougou168 1楼•4 个月前

更多关于Flutter Math：如何使用纯 Flutter 渲染 LaTeX 数学公式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 2楼•4 个月前

在Flutter应用中渲染LaTeX数学公式，虽然Flutter本身不直接支持LaTeX，但你可以借助一些第三方库来实现这一功能。一个流行的选择是使用flutter_katex或flutter_math_view这样的库。这里简要介绍一种使用flutter_math_view库的方法：

添加依赖：在你的pubspec.yaml文件中添加flutter_math_view依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_math_view: ^x.y.z  # 替换为最新版本号

导入库：在你的Dart文件中导入该库：

import 'package:flutter_math_view/flutter_math_view.dart';

使用MathView组件：使用MathView组件来显示LaTeX公式。例如：

MathView(
  latex: r"E = mc^2",  // LaTeX公式
  style: TextStyle(fontSize: 24),
);

运行应用：确保所有设置正确后，运行你的Flutter应用，你应该能看到渲染的LaTeX数学公式。

请注意，不同的库可能有不同的API和配置方式，因此建议查阅具体库的文档以获取最新和详细的使用指南。此外，由于LaTeX公式的复杂性，渲染性能可能受公式大小和复杂度的影响，需在实际应用中做好性能优化。