flutter_tex 3.6.2+4 
flutter_tex: ^3.6.2+4 copied to clipboard
shahxad.comA Flutter Package to render Mathematics / Maths, Physics and Chemistry, Statistics / Stats Equations based on LaTeX with full HTML and JavaScript support.
Flutter TeX #
Contents #
About #
A Flutter Package to render so many types of equations based on LaTeX and TeX, most commonly used are as followings:
-
Mathematics / Maths Equations (Algebra, Calculus, Geometry, Geometry etc...)
-
Physics Equations
-
Signal Processing Equations
-
Chemistry Equations
-
Statistics / Stats Equations
-
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 webview_flutter plugin.
How to use? #
1: Add this to your package's pubspec.yaml file:
dependencies:
flutter_tex: ^3.6.2+4
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 following implementations in Android, iOS and Web respectively.
Android
Make sure to add this line android:usesCleartextTraffic="true" in your <project-directory>/android/app/src/main/AndroidManifest.xml under application like this.
<application
android:usesCleartextTraffic="true">
</application>
and permissions
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
iOS
Add following code in your <project-directory>/ios/Runner/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key> <true/>
</dict>
<key>io.flutter.embedded_views_preview</key> <true/>
Web
For Web support you need to put <script src="assets/packages/flutter_tex/src/flutter_tex_libs/flutter_tex.js"></script> in <head> tag of your <project-directory>/web/index.html like this.
<head>
<meta charset="UTF-8">
<title>Flutter TeX</title>
<script src="assets/packages/flutter_tex/src/flutter_tex_libs/flutter_tex.js"></script>
</head>
4: Now in your Dart code, you can use:
import 'package:flutter_tex/flutter_tex.dart';
5: Now you can use TeXHTML widget like this.
Example #
TeXView(
showLoadingWidget: false,
renderingEngine: widget.renderingEngine,
children: [
TeXViewDocument(r"""<h2>Flutter \( \rm\\TeX \)</h2>""",
style: TeXViewStyle(textAlign: TeXViewTextAlign.Center)),
TeXViewInkWell(
id: "id_0",
child: TeXViewColumn(children: [
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"""<p>
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}.$$</p>""",
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,
),
loadingWidget: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Text("Rendering...")
],
),
),
onTap: (childID) {
print("TeXView $childID is tapped.");
})
Api Changes. #
- Please see CHANGELOG.md.
Api Usage. #
-
children:A list ofTeXViewWidget -
TeXViewWidgetTeXViewDocumentholds TeX data by using a raw string e.g.r"""$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$<br> """You can also put HTML and Javascript code in it.TeXViewContainerholds a singleTeXViewWidgetwith styling.TeXViewImagerenders image from assets or network.TeXViewColumnholds a list ofTeXViewWidgetvertically.TeXViewInkWellfor listening tap events. Its child and id is mandatory.
-
TeXViewStyle()You can style each and everything usingTeXViewStyle()or by using customCSScode byTeXViewStyle.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. -
height:Fixed Height for TeXView. (Avoid using fixed height for TeXView, let it to adopt the height by itself) -
loadingWidget:Show a loading widget before rendering completes. -
showLoadingWidget:Show or hide loadingWidget. -
onTap:On Tap Callback returns id ofTeXViewInkWell. -
onRenderFinished:Callback with the rendered page height, when TEX rendering finishes. -
onPageFinished:Callback when TeXView loading finishes. -
keepAlive:Keep widget Alive . (True by default).
For more please see .
Application Demo. #
Web Demo. #
You can find web demo at [**https://flutter-tex.web.app**](https://flutter-tex.web.app)
Screenshots #
| Screenshot# 01 | Screenshot# 02 |
|---|---|
 |
 |
| Screenshot# 03 | Screenshot# 04 |
|---|---|
 |
 |
To Do: #
Speed Optimizations as it's a bit slow rendering speed. It takes 1-2 seconds to render after application loaded.(Solved by adding Katex Support)-
Bug in Web Supporton setState everything disappears.
Cautions: #
- Please avoid using too many TeXViews in a single page, because this is based on webview_flutter a complete web browser. Which may cause slowing down your app.
Metadata
Publisher
Metadata
A Flutter Package to render Mathematics / Maths, Physics and Chemistry, Statistics / Stats Equations based on LaTeX with full HTML and JavaScript support.
Repository (GitHub)
View/report issues
License
unknown (LICENSE)
Dependencies
flutter, mime, webview_flutter
