How to dynamically render TeX equations in input text field in Flutter? - 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!