How to properly implement math equations (TeX) in Flutter

Question

I tried to implement math equations in flutter application using the flutter TeX package. It takes much time to render the equation. It doesn't look so nice as I wanted to be. Are there any other implementations to effectively use math chemistry and other complex format equations without compromising the design.

here's my code:

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body:TeXView(
          teXHTML: r"""
  <style>#myDiv 
   {color:   "#CC0000",}</style>

  <div id='myDiv'>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>
  """ ,
          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");
              },
        )
    );
  }}

Here's the output: [screenshot][1]

Answer 1

There is now also the catex package (full disclosure: I am an author).

CaTeX does not need web views, which is why you can render your equations extremely fast (basically as fast as any other widget).

Note: it is currently in pre-release, which means that a lot of functionality is still unsupported.

import 'package:catex/catex.dart';

Widget build(BuildContext context) => CaTeX(r'x = {-b \pm \frac{\sqrt{b^2-4ac}}  {2a}}');

Answer 2

Just take a look at the latest version of flutter_tex:^3.5.0+2, styling feature has been added, now you can style each and everything very easily. There are some API changes in this version so please be careful before upgrading and do check the example before proceeding.

As for rendering speed is concerned you should change rendering engine from Mathjax to Katex which is much faster than Mathjax. e.g. renderingEngine:RenderingEngine.Katex