Performantly render scientific equations using the KaTeX library on Android, iOS and the web platform.
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.
KaTeX( @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:
dependencies: 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:
Add the following code into the
<head>...</head> section of your
<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>
Important: To use
katex_flutter on Android you have to copy
example/android/app/src/main/assets to your project's
Due to an issue in the
webview_flutter plugin you need to add the following to your
<uses-permission android:name="android.permission.WAKE_LOCK" />
The issue is tracked at https://github.com/flutter/flutter/issues/49912
Source code #
This package was initially created for the education project TestApp.