Mr.B Fellow
Mr.B Fellow

Reputation: 131

How to render Latex in Flutter, offline

There is a package called flutter_tex. But, it required internet access. I want to render Latex without using internet. How to render Latex in flutter, without using internet.

Upvotes: 13

Views: 5582

Answers (3)

nitroplr
nitroplr

Reputation: 109

The big problem with flutter_tex is that it uses HtmlElementView which has huge accessibility problems including the detection of Flutter gestures. This means everywhere you use a TexView, mouse wheel scrolling will not work, nor will swipe up and swipe down to scroll. Also, flutter_tex is no longer maintained as evidence by the package's own example for custom fonts being broken and no response to bug reports on the issue. The CaTeX package above that uses pure Flutter and dart seems like a great alternative, but they have moved their development efforts over to https://pub.dev/packages/flutter_math_fork . I have not used this package yet, but we need something like it since the HtmlElementView that the others use is not good. A more detailed explanation of why it is bad can be found here: https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html .

Upvotes: 2

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126824

You can now also try CaTeX (full disclosure: I am an author).
It does not depend on any web views or JavaScript and renders the equations "natively" in Flutter.

Note: the package is a pre-release, so you will not be able to use it for every formula.

import 'package:catex/catex.dart';

Widget build(BuildContext context) => CaTeX(r'\text{Your equation: } 40 + 2 = 42');

Upvotes: 2

TheOneWithTheBraid
TheOneWithTheBraid

Reputation: 153

You could use katex_flutter.

katex_flutter is an alternative to flutter_tex which offers actually exactly the same functionality as flutter_tex does. There are some minor differences under the hood: For example katex_flutter does not require an internet connection and uses KaTeX instead of MathJax for rendering equations.

Please read the full instructions in pub.dev about how to set up katex_flutter for your project.

A simple example how to use it:

import 'package:katex_flutter/katex_flutter.dart';

...

return KaTeX(laTeXCode: Text("\\alpha", style: Theme.of(context)
                      .textTheme
                      .bodyText1
                      .copyWith(color: Colors.red)))

Upvotes: 6

Related Questions