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]

Raiment

Answer 1

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

Ventriloquism

is there a way to use the custom font with the inline text? – Raiment

Currently, that's not possible but work on that is in progress. – Ventriloquism

Hi, I have integrated custom fonts feature in flutter_tex, check Demo Here. – Ventriloquism

Hey! that's awesome. It looks much better. Thanks for your work. well appreciated! – Raiment

Answer 2

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}}');

Etom

is it capable of rendering inline math equations? something like <p>$\sum_{i=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}$ is a well known result. in html, for example. – Dioscuri

Answer 3

In my case, I was not happy because i was getting reloading issue in Quiz App.

 TeXViewGroup(
      children: question.options!.map((Option option) {
        return TeXViewGroupItem(
          id: option.id!,
          child: TeXViewDocument(
            option.title!,
            style: TeXViewStyle(
              sizeUnit: TeXViewSizeUnit.pixels,
              contentColor: _getOptionTextColor(question, option),
              backgroundColor: _getOptionBackgroundColor(question, option),
              borderRadius: const TeXViewBorderRadius.all(8),
              border: TeXViewBorder.all(
                TeXViewBorderDecoration(
                  borderWidth: 1,
                  borderColor: _getOptionTextColor(question, option),
                ),
              ),
              margin: const TeXViewMargin.only(bottom: 8, top: 8),
              padding: const TeXViewPadding.all(16),
            ),
          ),
        );
      }).toList()

As you can see, I was using style in TeXViewDocument and conditionally i was changing bg color and other style.

Now I am using selectedItemStyle and normalItemStyle for styling. Now rendering/reloading issue is solved.

May be it can help you!!

Lourdeslourie