How to dynamically render TeX equations in input text field in Flutter?

Question

TL;DR

I need to render LaTeX equations in a Flutter text input field while the user is typing

The Goal

I am currently working on a Flutter project for both web/desktop where I need to be able to render LaTeX/TeX equations in an input field while the user is typing. For example, if the user types “sqrt”, a square root symbol appears where the sqrt was. This will allow for easy math input of complex functions, where the user can type something like:

“int 1 2 sqrt(sin(x/2)^2)”

While typing, this equation would continuously render in the same input box and end up looking like:

Example Equation Render

I plan to allow the user to use a lot of different mathematical symbols/functions.

An extremely similar implementation of what I am trying to achieve is the MathQuill project. However while MathQuill works well with JavaScript and React, I have not found a way to use it in Flutter. If there is a way to port it into Flutter that would work perfectly for my needs.

Requirements and Preferences

Requirements

• Render the TeX in the same input box that they are typing in.
  
  
• Render TeX in real time. The user should be able to see changes in their current text box while typing. A good (but very simple) demo of what I would like can be seen in the math entry boxes on Desmos. I do not want the user to have to press Enter to see their changes, it should happen while typing.
  
  
• Cannot be click-based equation entry. I want the user to be able to type “sqrt”, “int”, “prod”, “sum”, etc. ... not click on a square root or integral button with some sort of on-screen keyboard. (For example, Flutter’s math_keyboard would not work for my project)
  
  
• Flutter-based solution.
  
  

Preferences

• I would prefer to use the KaTeX rendering engine due to it’s substantially increased speed over MathJax. I am still flexible here.
  
  

Current Attempts

I have looked through many packages on pub.dev, but have not been able to find a suitable package that suits my use case. I have managed to display TeX on the webpage using the flutter_tex package. For example:

Code:

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

void main() => runApp(TexApp());

class TexApp extends StatelessWidget {
  const TexApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text("Testing flutter_tex")),
          body: TeXView(
              child: TeXViewColumn(children: [

            // This widget displays data perfectly as it should, but it is static and
            // so the user cannot dynamically edit the cell.
            TeXViewDocument(r"""<p>                                
                    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$</p>""",
                style: TeXViewStyle.fromCSS(
                    'padding: 15px; color: black; background: white')),
          ]))),
    );
  }
}

Resulting webpage:

Resulting TeX equations in Flutter web application

However, the above implementation does not allow continuous input/dynamic rendering as the user types their equations which I need for my project.

I am new to Flutter and web development as a whole. However, I spent a lot of time learning React and Flutter and I am certain that I want to use Flutter moving forward for a variety of reasons.

Any help here would be extremely appreciated!

UPDATE: As of August 2022 I still have not found a solution to this issue!