katex_flutter 2.4.0+16

katex_flutter #

Render scientific equations using the KaTeX library.

  • Mathematics / Maths Equations (Algebra, Calculus, Geometry, Geometry etc...)
  • Physics Equations
  • Signal Processing Equations
  • Chemistry Equations
  • Statistics / Stats Equations

Rendering is done using KaTeX.

katex_flutter is working on Android, iOS, and the web platform. Desktop support is planned.

On mobile platforms this package mainly depends on webview_flutter plugin. On Android and the web katex_flutter fully runs offline.

On web platform this package directly into Flutter's platform view's shadow root.

Unlike flutter_tex it does not create a local web server. This increases the performance significantly and allows non-mobile platforms.


  @required laTeX,             // The LaTeX code to be rendered
  delimiter = '\$',            // The delimiter to be used for inline LaTeX
  displayDelimiter = '\$\$',   // The delimiter to be used for Display (centered, "important") LaTeX
  color = Colors.black,        // Background color
  background = Colors.white,   // Text color
  inheritWidth = true);        // Whether to use the parent's width or only the minimum required by the equation

Use this package as a library #

Add this to your package's pubspec.yaml file:

  katex_flutter: ^2.3.0+14

You can install packages from the command line with Flutter:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:katex_flutter/katex_flutter.dart';

Web-only: update web/index.html

Add the following code into the <head>...</head> section of your web/index.html:

<link rel="stylesheet" href="packages/katex_flutter/katex_js/katex.min.css">
<script defer src="packages/katex_flutter/katex_js/katex.min.js"></script>
<script defer src="packages/katex_flutter/katex_js/contrib/auto-render.min.js"></script>
<script src="packages/katex_flutter/katex_flutter.js"></script>

Android-only: update android/app/src/main/AndroidManifest.xml

Important: To use katex_flutter on Android you have to copy example/android/app/src/main/assets to your project's android/app/src/main/.

Due to an issue in the webview_flutter plugin you need to add the following to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.WAKE_LOCK" />

The issue is tracked at https://github.com/flutter/flutter/issues/49912

Source code #

The source code is hosted on GitLab. It's licensed under the terms and conditions of the EUPL-1.2.

This package was initially created for the education project TestApp.

2.4.0+16 - Added offline support #

  • Support for rendering equations offline on Android and the web
  • Support for custom delimiters on the web

2.3.0+14 - Implemented automatic width for web platform #

  • Implemented automatic width for the web platform

2.2.0+12 - Fixed overflow on web platform #

  • The compution ot the required width is now no longer limited to 200px (the initial width)

2.1.0+10 - Working dynamic boundaries on web platform #

  • The web platform can now compute the Widget's width and height on it's own. No more need for SizedBox wrap.
  • Added dynamic generation of the required JavaScript code. Please update your web/index.html according to [README.md] and run flutter pub run katex_flutter:main

2.0.2+8 - Fixed equations displayed twice #

  • Fixed some equations rendered twice due to inpropper MathML compatibility

2.0.1+7 - Fixed rendering of several equations #

  • Fixed issues when using several different KaTeX-Widgets on web platform

2.0.0+6 - Support for web and mobile alongside #

  • Separated mobile and web code
  • Updating the LaTeX code is not possible yet on mobile platforms
  • Automatic size and colors are not supported yet on web

1.1.1+5 - First support for web platforms #

  • Stable support for Android and iOS
  • Experimental support for web platform. Auto-sizing the Widget is not supported yet on web.

0.0.1 - Initial release #

  • Not working yet. Just for testing.


katex_flutter_test #

An example for the katex_flutter package.

Getting Started #

flutter pub get
flutter pub run katex_flutter:main
flutter run

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  katex_flutter: ^2.4.0+16

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:katex_flutter/katex_flutter.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health issues and suggestions

Fix lib/katex_flutter_web.dart. (-25 points)

Analysis of lib/katex_flutter_web.dart failed with 1 error:

line 63 col 8: The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
js ^0.6.1+1 0.6.1+1
webview_flutter ^0.3.19+5 0.3.19+7
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies