katex_flutter 3.2.0+21

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

katex_flutter #

Render scientific LaTeX equations using the KaTeX library.

  • Mathematics / Maths Equations (Algebra, Calculus, Geometry, Geometry etc...)
  • Physics Equations
  • Signal Processing Equations
  • Chemistry Equations
  • Statistics / Stats Equations
  • Inherit text style from parent widgets

Note: The bad pub.dev score is due to a known error in the analysis server and not our fault.

LaTeX 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, Desktops 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.


Note: we recently did significant API changes. Please update any prior code.

  @required laTeXCode,         // A Text() containing 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
  background = Colors.white,   // Background color (web is ignoring this but using transparent instead)
  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.2.0+21

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


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

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="/assets/packages/katex_flutter/lib/katex_js/katex.min.css">
<script defer src="/assets/packages/katex_flutter/lib/katex_js/katex.min.js"></script>
<script defer src="/assets/packages/katex_flutter/lib/katex_js/contrib/auto-render.min.js"></script>
<script src="/assets/packages/katex_flutter/lib/katex_flutter.js"></script>

Android-only: update 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 but support is very unstable. 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