Flutter Math: 使用纯 Flutter 渲染 LaTeX 数学公式

[znjw]

介绍一下我开发的一个 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

使用方法

1. 在 pubspec.yaml 文件中添加对flutter_math的依赖
2. 在代码中使用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，暂无解决办法。

[sunbreak]

赞