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