flutter_math 0.1.6

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 the following font resources into your pubspec.yaml (under the root flutter: tag, not dependencies: 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

Mobile

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

Web

Web supported is added in v0.1.7. 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 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