How to render Latex in Flutter, offline

Question

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.

I don't think you need an internet connection to render the text, but it displays the result in a WebView which is probably why you need to add the internet permissions. None of the listed permissions will demand the user to actively grant permission. — Joel Broström, May 13 '20 at 11:31
Thank you. Yes you are right. Using webviews requires internet access. I want something that will not use webviews. Something that will render Latex natively. — Mr.B Fellow, May 14 '20 at 14:42
flutter_tex developer here, it doesn't require an internet connection to render equations, it just requires those particular permissions to properly render the data. — Shahzad Akram, May 30 '20 at 21:13

TheOneWithTheBraid · Answer 1 · 2020-05-30T13:14:31.217

5

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)))

edited May 30 '20 at 13:14

answered May 30 '20 at 12:24

TheOneWithTheBraid

143
1
8

I just tried it and the rendered output is really unsatisfactory. I needs much more improvement. – Second Person Shooter Oct 24 '20 at 03:48
Does the package support all available commands listed here: https://katex.org/docs/supported.html ? – Say OL Feb 11 '21 at 00:44

score 2 · Answer 2 · answered Jun 30 '20 at 15:39

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');

score 1 · Answer 3 · answered Apr 26 '23 at 01:17

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 .

How to render Latex in Flutter, offline

3 Answers3