katex_flutter 3.0.2+19

Performantly render scientific equations using the KaTeX library on Android, iOS, the Web and the Desktop platform.

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, the Web and the Desktop platform.

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
  onError);                    // Function(String errorMessage) to be executed on Error. Useful for dependency warnings on Desktop.

Use this package as a library #

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

  katex_flutter: ^3.0.1+18

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

Platform specific #

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>

In your project, create a web/packages/katex_flutter folder. Now copy katex_flutter's lib/{katex_flutter.js,katex_js} into your web/packages/katex_flutter/.

Android-only: update android/app/src/main/ #

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

Desktop #

Desktop platforms are supported by native Flutter Desktop as well as go-flutter. You are required to install

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.

pub points



Performantly render scientific equations using the KaTeX library on Android, iOS, the Web and the Desktop platform.

Repository (GitLab)
View/report issues


API reference




flutter, js, webview_flutter


Packages that depend on katex_flutter