flutterflutter-layoutmathjaxtexflutter-tex

How to properly implement math equations (TeX) in Flutter


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]


Solution

  • 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