Logo for fluttex

Customizable Flutter plugin that renders TeX equations blazingly fast!

pub.dev fluttex GitHub issues BSD 3-Clause License

Table of Contents

About

Screenshot of the TeX Tools Example App

Fluttex is a customizable Flutter plugin that renders TeX equations blazingly fast.

Built With

This project provides an efficient Widget that renders TeX equations using KaTeX. Fluttex is built on TeX Tools, a TeX library for Android that uses WebViews as a wrapper for KaTeX. As such, it would not have been possible without the great work put into the KaTeX typesetting library for the web.

Getting Started

Installation

Refer to the installation guide on pub.dev

Usage

Add the widget MathViewStatic to your build method. Take a look at the configuration section to see which parameters you can pass.

var MathView = new MathViewStatic(
    tex: "\\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi \\\\",
);

The above is an example of a MathView that only has the tex parameter. Make note that all backslashes have to be escaped.

It is also possible to change the TeX parameter programmatically later on. Create a MathViewStatic as usual and add the onMathViewCreated callback.

var MathView = new MathViewStatic(
    onMathViewCreated: (controller) {
        _mathViewController = controller;
    },
);

Later on, you can use the MathViewController to render new TeX strings.

_mathViewController.render("\\ce{\$K = \\frac{[\ce{Hg^2+}][\\ce{Hg}]}{[\\ce{Hg2^2+}]}\$}");

For more detailed overview of the example, please refer to the example directory.

Configuration

MathView

You can change the following properties of the MathView.

KeyDescriptionTypeDefault
texA string of TeX that should be renderedStringnull
displayMode"If true the math will be rendered in display mode, which will put the math in display style (so \int and \sum are large, for example), and will center the math on the page on its own line. If false the math will be rendered in inline mode."booleanfalse
leqno"If true, display math has \tags rendered on the left instead of the right, like \usepackage[leqno]{amsmath} in LaTeX."booleanfalse
fleqno"If true, display math renders flush left, like \documentclass[fleqn] in LaTeX."booleanfalse
throwOnError"If true (the default), KaTeX will throw a ParseError when it encounters an unsupported command or invalid LaTeX. If false, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in the color given by errorColor."booleanfalse
colorThe color of the TeX rendered in the MathView.Colorblack
colorBackgroundThe background color of the MathView.Colorwhite
colorErrorA color that determines the color that unsupported commands and invalid LaTeX are rendered in when throwOnError is set to false.Color#c00
fontSizeThe font size of the rendered TeX string.Integer16

Descriptions are partially quoted from the KaTeX Docs.

Roadmap

Here's a list of additions that are planned for the future:

  1. Support for iOS
  2. Support for Flutter Web
  3. Interactive MathView
  4. MathInput, that checks the TeX input for correctness and offers typing support

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the BSD 3-Clause License. See LICENSE for more information.

Contact

If you have any questions, feel free to contact Leon Staufer.

Project Link: https://github.com/LeonStaufer/fluttex

Disclaimer

This plugin has been developed independently from and is not endorsed by Google. Flutter, and the Flutter logo are registered trademarks owned by the Google.

Libraries

fluttex
math_view_static