A Flutter Package to render Mathematics and Chemistry Equations based on LaTeX

Flutter TeX .A Flutter Package to render so many types of equations based on LaTeX, 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.

Use this package as a library in your flutter Application

1: Add this to your package’s pubspec.yaml file:

dependencies:
  flutter_tex: ^3.1.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: For 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" />

For 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/> 

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.

    TeXView(
          teXHTML: r"""$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$<br> """,
          renderingEngine: RenderingEngine.Katex,  // Katex for fast render and MathJax for quality render.
          onRenderFinished: (height) {
                print("Widget Height is : $height");
                },   
          onPageFinished: (string) {
                print("Page Loading finished");
              },
        )

Use Katex RenderingEngine for fast render and MathJax RenderingEngine for quality render.

Api Usage.

• teXHTML: Raw String containing HTML and TEX Code e.g.

  
  String textHTML = r"""
  <style>
   #myDiv 
   {
   background-color: red;
   }
  </style>
  
  <div id='myDiv'>
      $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </div>
  """
  
  

  You can also put javascript code in it.

  If you load Network Image in your document you should go like this.

  <img onload="RenderedWebViewHeight.postMessage(document.getElementById('teXHTML').clientHeight);"
  src="https://img.wallpapersafari.com/desktop/1920/1080/84/27/nMWzIB.jpg" />
  
  

  Do put this
  onload="RenderedWebViewHeight.postMessage(document.getElementById('teXHTML').clientHeight);"
  in your img tag, it’ll recalculate the height of the page and rerender the page after the image loading completes.

• renderingEngine: Render Engine to render TeX (Default is Katex Rendering Engine).

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

• onTap: On Tap Callback.

• onRenderFinished: Callback with the rendered page height, when TEX rendering finishes.

• onPageFinished: Callback when TeXView loading finishes.

• keepAlive: Keep widget Alive . (True by default).

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)
• Beta support for Flutter Web, Automatically calculation of TeXView Height in Flutter Web and much more to do for Flutter Web.

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 to slow down your app.

Download Details:

Author: shah-xad

GitHub: https://github.com/shah-xad/flutter_tex

#flutter #dart #programming