A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX
A Flutter Package to render fully offline so many types of equations and expressions based on LaTeX and TeX, most commonly used are as followings:
Mathematics / Maths Equations and expressions (Algebra, Calculus, Geometry, Geometry etc...)
Physics Equations and expressions
Signal Processing Equations and expressions
Chemistry Equations and expressions
Statistics / Stats Equations and expressions
It also includes full HTML with JavaScript support.
Rendering of equations depends on mini-mathjax a simplified version of MathJax and Katex JavaScript libraries.
This package mainly depends on webviewflutterplus.
Fonts Sample |
Quiz Sample | TeX Document |
---|---|---|
![]() |
![]() |
![]() |
TeX Document |
Image & Video | InkWell |
---|---|---|
![]() |
![]() |
![]() |
1: Add fluttertex latest [](https://pub.dev/packages/fluttertex) version under dependencies to your package's pubspec.yaml file.
dependencies: flutter_tex: ^3.6.7+9
2: You can install packages from the command line:
$ flutter packages get
Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.
3: Now you need to put the following implementations in
Android,
iOS, and
Webrespectively.
Make sure to add this line
android:usesCleartextTraffic="true"in your
/android/app/src/main/AndroidManifest.xmlunder
applicationlike this.
xml
It completely works offline, without internet connection, but these are required permissions to work properly:
It'll still work in debug mode without permissions, but it won't work in release application without mentioned permissions.
Add following code in your
/ios/Runner/Info.plist
plist NSAppTransportSecurity NSAllowsArbitraryLoads io.flutter.embedded_views_preview
For Web support you need to put
in tag of your/web/index.htmllike this.
html<meta charset="UTF-8"> <title>Flutter TeX</title> <script src="assets/packages/flutter_tex/js/flutter_tex.js"></script>
4: Now in your Dart code, you can use:
import 'package:flutter_tex/flutter_tex.dart';
5: Now you can use TeXView as a widget:
TeXView( child: TeXViewColumn(children: [ TeXViewInkWell( id: "id_0", child: TeXViewColumn(children: [ TeXViewDocument(r"""Flutter \( \rm\\TeX \)
""", style: TeXViewStyle(textAlign: TeXViewTextAlign.Center)), TeXViewContainer( child: TeXViewImage.network( 'https://raw.githubusercontent.com/shah-xad/flutter_tex/master/example/assets/flutter_tex_banner.png'), style: TeXViewStyle( margin: TeXViewMargin.all(10), borderRadius: TeXViewBorderRadius.all(20), ), ), TeXViewDocument(r"""When \(a \ne 0 \), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
""", style: TeXViewStyle.fromCSS( 'padding: 15px; color: white; background: green')) ]), ) ]), style: TeXViewStyle( elevation: 10, borderRadius: TeXViewBorderRadius.all(25), border: TeXViewBorder.all(TeXViewBorderDecoration( borderColor: Colors.blue, borderStyle: TeXViewBorderStyle.Solid, borderWidth: 5)), backgroundColor: Colors.white, ), ), )
You can find web demo at https://flutter-tex.web.app
children:A list of
TeXViewWidget
TeXViewWidget
TeXViewDocumentHolds TeX data by using a raw string e.g.
r"""$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$You can also put HTML and Javascript code in it.
"""
TeXViewMarkdownHolds markdown data.
TeXViewContainerHolds a single
TeXViewWidgetwith styling.
TeXViewImagerenders image from assets or network.
TeXViewColumnholds a list of
TeXViewWidgetvertically.
TeXViewInkWellfor listening tap events. Its child and id is mandatory.
TeXViewGroupa group of
TeXViewGroupItemusually used to create quiz layout.
TeXViewStyle()You can style each and everything using
TeXViewStyle()or by using custom
CSScode by
TeXViewStyle.fromCSS()where you can pass hard coded String containing CSS code. For more information please check the example.
renderingEngine:Render Engine to render TeX (Default is Katex Rendering Engine). Use Katex RenderingEngine for fast render and MathJax RenderingEngine for quality render.
loadingWidgetBuilder:Show a loading widget before rendering completes.
onRenderFinished:Callback with the rendered page height, when TEX rendering finishes.
onTeXViewCreated:Callback when TeXView loading finishes.
For more please see the Example.
Bug in Web Supporton
setStateeverything disappears.
TeXViewin a single page, because this is based on webviewflutterplus a complete web browser. Which may cause slowing down your app. I am trying to add all necessary widgets within
TeXView, So please prefer to use
TeXViewWidget. You can check example folder for details. If you find any problem you can report an issue.