如何在 Flutter 的输入文本字段中动态渲染 TeX 方程？

Question

长话短说

\n

我需要在用户输入时在 Flutter 文本输入字段中渲染 LaTeX 方程

\n

目标

\n

我目前正在开发一个适用于网络/桌面的 Flutter 项目，我需要能够在用户打字时在输入字段中渲染 LaTeX/TeX 方程。例如，如果用户键入 \xe2\x80\x9csqrt\xe2\x80\x9d，则 sqrt 所在位置会出现一个平方根符号。这将允许复杂函数的简单数学输入，用户可以输入如下内容：

\n

\xe2\x80\x9cint 1 2 sqrt(sin(x/2)^2)\xe2\x80\x9d

\n

键入时，该方程将连续呈现在同一个输入框中，最终看起来像：

\n

方程渲染示例

\n

我计划允许用户使用很多不同的数学符号/函数。

\n

MathQuill项目是与我想要实现的目标极其相似的实现。然而，虽然 MathQuill 与 JavaScript 和 React 配合得很好，但我还没有找到在 Flutter 中使用它的方法。如果有一种方法将其移植到 Flutter 中，可以完美满足我的需求。

\n

要求和偏好

\n

要求

\n

\n
• 在他们输入的同一个输入框中呈现 TeX。
  
  
\n
• 实时渲染 TeX。用户在键入时应该能够看到当前文本框中的更改。在Desmos的数学输入框中可以看到我想要的一个很好（但非常简单）的演示。我不希望用户必须按 Enter 才能看到他们的更改，它应该在键入时发生。
  
  
\n
• 不能基于点击的方程输入。我希望用户能够输入 \xe2\x80\x9csqrt\xe2\x80\x9d、\xe2\x80\x9cint\xe2\x80\x9d、\xe2\x80\x9cprod\xe2\x80\x9d、\xe2 \x80\x9csum\xe2\x80\x9d 等...不要使用某种屏幕键盘单击平方根或积分按钮。（例如，Flutter\xe2\x80\x99s math_keyboard不适用于我的项目）
  
  
\n
• 基于颤振的解决方案。
  
  
\n

\n

优先

\n

\n
• 我更喜欢使用KaTeX渲染引擎，因为它\xe2\x80\x99s 比MathJax显着提高了速度。我在这里还是很灵活的。
  
  
\n

\n

目前的尝试

\n

我在 pub.dev 上查看了许多软件包，但未能找到适合我的用例的合适软件包。我已经成功使用flutter_tex包在网页上显示 TeX 。例如：

\n

代码：

\n

import \'package:flutter/material.dart\';\nimport \'package:flutter_tex/flutter_tex.dart\';\n\nvoid main() => runApp(TexApp());\n\nclass TexApp extends StatelessWidget {\n  const TexApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n          appBar: AppBar(title: Text("Testing flutter_tex")),\n          body: TeXView(\n              child: TeXViewColumn(children: [\n\n            // This widget displays data perfectly as it should, but it is static and\n            // so the user cannot dynamically edit the cell.\n            TeXViewDocument(r"""<p>                                \n                    $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$$</p>""",\n                style: TeXViewStyle.fromCSS(\n                    \'padding: 15px; color: black; background: white\')),\n          ]))),\n    );\n  }\n}\n\n

\n

结果网页：

\n

Flutter Web 应用程序中生成的 TeX 方程

\n

但是，当用户键入我的项目所需的方程式时，上述实现不允许连续输入/动态渲染。

\n

我对 Flutter 和整个 Web 开发都是新手。然而，我花了很多时间学习 React 和 Flutter，并且出于多种原因我确信我想继续使用 Flutter。

\n

如有任何帮助，我们将不胜感激！

\n

更新：截至 2022 年 8 月，我仍然没有找到此问题的解决方案！

\n