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 a javascript library.

this package mainly depends on webview_flutter plugin.

only tested on android not on ios because i don’t own a mac.

use this package as a library in your flutter application

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

dependencies:
  flutter_tex: ^0.0.19

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 in your dart code, you can use:

import 'package:flutter_tex/flutter_tex.dart';

4: 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>

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

example

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

main() async {
runapp(fluttertex());
}

class fluttertex extends statefulwidget {
@override
_fluttertexstate createstate() => _fluttertexstate();
}

class _fluttertexstate extends state<fluttertex> {
  string tex = uri.encodecomponent(r"""
  <p>
    a simple example to render ( rm\tex ) in flutter<br>

    <style>
      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 40%;
      }

      .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      }

      .container {
        padding: 2px 16px;


    </style>
    <div class="card">
      <div class="container">
        <p>
          begin{align}
          dot{x} & = sigma(y-x) \
          dot{y} & = rho x - y - xz \
          dot{z} & = -beta z + xy
          end{align}
        </p>
      </div>
    </div>

    <br>
    <br>

    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}.$<br>

    $ oint_c {e cdot dell = - frac{d}{{dt}}} int_s {b_n da} $<br>

    bohr radius

    ( a_0 = frac{{hbar ^2 }}{{m_e ke^2 }} )<br>

    relationship between energy and principal quantum number

    ( e_n = - r_h left( {frac{1}{{n^2 }}} right) = frac{{ - 2.178 times 10^{ - 18} }}{{n^2 }}joule )<br><br>

    $ce{co2 + c -> 2 co}$ <br><br>

    $ce{hg^2+ ->[i-] hgi2 ->[i-] [hg^{ii}i4]^2-}$ <br><br>

    $ce{x na(nh4)hpo4 ->[delta] (napo3)_x + x nh3 ^ + x h2o}$ <br><br>

  </p>
  """);

 @override
 widget build(buildcontext context) {
   return materialapp(
     home: scaffold(
       appbar: appbar(
         title: text("flutter tex example"),
       ),
       body: texview(
         texhtml: tex,
       ),
     ),
   );
 }
}

screenshots mathematics and chemistry