Flutter Math发布，使用纯Flutter渲染LaTeX

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

相比已有的flutter_tex插件，本插件完全的基于Dart和Flutter，不包含任何WebView和Javascript，性能远超过flutter_tex。大家如果频繁遇到flutter_tex带来的卡顿以及崩溃，欢迎试用Flutter Math。

渲染样例

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

delta.png

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)

fourier.png

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

schrodinger.png

使用方法

1. 在pubspec.yaml文件中添加对flutter_math的依赖
2. 在pubspec.yaml的flutter: 标签下加入下列字体资源

   flutter:
   
     // ......
   
     fonts:
       - family: KaTeX_Main
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Main-Regular.ttf
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Main-Italic.ttf
             style: italic
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Main-Bold.ttf
             weight: 700
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Main-BoldItalic.ttf
             weight: 700
             style: italic
       - family: KaTeX_Math
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Math-Italic.ttf
             style: italic
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Math-BoldItalic.ttf
             weight: 700
             style: italic
       - family: KaTeX_AMS
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_AMS-Regular.ttf
       - family: KaTeX_Caligraphic
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Caligraphic-Regular.ttf
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Caligraphic-Bold.ttf
             weight: 700
       - family: KaTeX_Fraktur
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Fraktur-Regular.ttf
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Fraktur-Bold.ttf
             weight: 700
       - family: KaTeX_SansSerif
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_SansSerif-Regular.ttf
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_SansSerif-Bold.ttf
             weight: 700
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_SansSerif-Italic.ttf
             style: italic
       - family: KaTeX_Script
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Script-Regular.ttf
       - family: KaTeX_Typewriter
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Typewriter-Regular.ttf
       - family: KaTeX_Size1
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Size1-Regular.ttf
       - family: KaTeX_Size2
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Size2-Regular.ttf
       - family: KaTeX_Size3
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Size3-Regular.ttf
       - family: KaTeX_Size4
         fonts:
           - asset: packages/flutter_math/katex_fonts/fonts/KaTeX_Size4-Regular.ttf
   

3. 在代码中使用FlutterMath.fromTexString(expression)组件展示渲染结果。可以通过提供可选参数options控制渲染样式，baseSizeMultiplier控制大小，onErrorFallback自定义输入错误时如何展示报错信息。样例如下

   FlutterMath.fromTexString(
     r'\frac a b',
     options: Options.displayOptions,
     baseSizeMultiplier: 1.0
     onErrorFallback: (errMsg) => Text(errMsg),
   )
   

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