flutter_math 0.1.7

Fast and High-quality TeX math equation rendering with pure Dart & Flutter.

Flutter Math

Math equation rendering in pure Dart & Flutter.

This project aims to achieve maximum compatibility and fidelity with regard to the KaTeX project, while maintaining the performance advantage of Dart and Flutter. A furthur UnicodeMath-style equation editing support will be experimented in the future.

The TeX parser is a completely rewritten Dart port of the KaTeX parser, with almost full features. There are only a few differences. List of some unsupported features can be found here.

Online Demo

Rendering Samples

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

How to use

Add flutter_math to your pubspec.yaml dependencies

From v0.1.7, this plugin no longer require extra font declarations in pubspec.yaml.

Mobile

Currently only Android platform has been tested. If you encounter any issues with iOS, please file them.

Web

Web support is added in v0.1.6. It is tested for DomCanvas backend. In general it should behave largely the same with mobile. It is expected to break with CanvasKit backend. Check out the Online Demo

API usage

Currently the usage is straightforward. Just FlutterMath.fromTexString(r'\frac a b'). There is also optional arguments of Options and Settings, which correspond to Options and Settings in KaTeX and support a subset of their features.

Display-style equations:

FlutterMath.fromTexString(r'\frac a b', options: Options.displayOptions)

In-line equations

FlutterMath.fromTexString(r'\frac a b', options: Options.textOptions)

You can also resize the output by providing baseSizeMultiplier parameter. (This parameter will also affect the size of absolute unit used in the equation. You can obtain the approximate font size for normal-sized letters by Options.fontSize.)

FlutterMath.fromTexString(
  r'\frac a b', 
  options: Options(
    style: MathStyle.display, 
    baseSizeMultiplier: 1.5,
  ),
)

If you would like to display custom styled error message or handle them differently, you should use onErrorFallback parameter

FlutterMath.fromTexString(
  r'\garbled $tring', 
  onErrorFallback: (errMsg) => Text(errMsg), // You can also invoke your handler here
)

Credits

This project is made possible thanks to the inspirations and resources from the KaTeX Project, MathJax, and Zefyr.

Goals

• ✅ : TeX math parsing (See design doc)
• ✅ : AST rendering in flutter
• ❌ : TeX output
• ❌ : UnicodeMath-style editing
• ❌ : UnicodeMath parsing and encoding
• ❌ : Breakable equations
• ❌ : MathML parsing and encoding