val_latex_flutter

LaTeX math for Flutter.

Formulas as widgets, inline math in text, and wrapping to the width.
Pure Dart and native Flutter rendering, on every platform.

⚙️ Engine · 📦 pub.dev

---

✨ Why val_latex_flutter?

• One widget per formula — Math.tex(r'\frac{a}{b}'), sized and coloured by the surrounding text style.
• Math inside text — MathText renders a string with $…$ and $$…$$ formulas in it, wrapping formulas with the words, and is safe for text that is still streaming in (streaming: true). Math.tex treats its formula as complete, so mistakes show; pass ParseOptions(streaming: true) to it for partial input.
• Fits any width — long formulas break into lines the way a person would break them; the rest scroll, shrink or clip.
• Native rendering — math glyphs are drawn from the font's outlines and text goes through Flutter's text engine, so Arabic, Indic and every other script shape correctly. No WebView, no platform code.
• Selectable and accessible — formulas take part in SelectionArea and copy their LaTeX source; screen readers hear them spoken and can move through them part by part.
• Fast — parses and layouts are cached and shared, and each formula replays its drawing instead of rebuilding it on every repaint.

🛠️ Quick start

flutter pub add val_latex_flutter

import 'package:val_latex_flutter/val_latex_flutter.dart';

// A formula; size and colour follow DefaultTextStyle.
Math.tex(r'x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}')

// Display style: centred, big operators, equation numbers at the margin.
Math.tex(r'\begin{align} a &= b \\ c &= d \end{align}', displayMode: true)

// Text with formulas in it.
MathText(r'The area of a circle is $\pi r^2$.')

// Inline in a paragraph, on the text baseline.
Text.rich(TextSpan(children: [
  const TextSpan(text: 'Area is '),
  MathSpan(r'\pi r^2'),
]))

This package re-exports val_latex, so one import gives the parser and layout engine too.

The example app is a tour of every feature, each live beside the code that makes it.

📐 Wrapping and overflow

Display formulas break to the available width. What cannot break follows overflow:

Math.tex(longFormula, displayMode: true, overflow: MathOverflow.shrink)

MathOverflow.scroll, .shrink (down to minShrink, then scroll) and .clip. Every formula widget reports its baseline, so it lines up with text in a baseline Row, in Text.rich, and when it scrolls or shrinks.

🎨 Theming

MathTheme sets defaults for every formula below it: colour, error and selection colours, the math font, fallback fonts, and styles per \htmlClass name.

MathTheme(
  data: const MathThemeData(color: Colors.indigo),
  child: child,
)

Latin Modern text fonts are bundled for \text{…}, matching the math font; MathTextFonts chooses others.

👆 Interaction

• Taps and hover — onTap, onLongPress and onHover report the tapped part with its source span.
• Highlights — highlights emphasise parts of a formula and animate when they change.
• Selection — inside a SelectionArea, selecting copies the LaTeX of what is selected (copyFormat for $…$-delimited source).
• Keyboard navigation — focusable: true moves through the parts with the arrow keys, announced to screen readers.

🔁 Coming from flutter_math_fork

import 'package:val_latex_flutter/flutter_math_compat.dart';

A drop-in replacement for package:flutter_math_fork/flutter_math.dart: the same Math.tex, SelectableMath, options and settings, backed by val_latex.

🖌️ Your own canvas

layoutFormula gives the layout and MathPainter draws it on any Canvas, for charts, whiteboards and custom render objects.

⚡ Performance

• Cached — MathCache shares parses and layouts between widgets, and a formula scrolled back into a list reuses its layout.
• Repaints replay a recording — each formula records its drawing once.
• Work only when asked — the spoken label and selection data are worked out when a screen reader or a selection needs them.
• Off the UI thread — layoutInBackground: true lays a very long formula out in a worker isolate.

Built, laid out and compared with flutter_math_fork on the same 120 formulas in a widget test, val_latex_flutter is about 3.9 times faster.

Built by Val

val_latex_flutter is part of Val, the live visual layer for AI agents.

💬 Community

Found a bug, or have an idea or feedback? Open an issue at github.com/useval/val_latex. If the package helps your project, consider giving it a like on pub.dev.

📄 License

BSD 3-Clause — see LICENSE. The bundled Latin Modern text fonts keep their own licence (GUST Font License), in fonts/latin-modern/; THIRD_PARTY_NOTICES.md credits them. Apps show the notices of this package and of val_latex on Flutter's licence page (showLicensePage) without any setup.