如何在Flutter中正确实现数学公式（TeX）？

Question

我试图在flutter应用中使用flutter TeX包实现数学方程。它需要很多时间来渲染方程.它看起来并不像我想要的那么漂亮。有没有其他的实现方法可以有效地使用数学化学和其他复杂格式的方程，而不影响设计。

这是我的代码。

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");
              },
        )
    );
  }}

下面是输出结果： [截图][1]

Answer 1

只要看看最新版本的 flutter_tex:^3.5.0+2增加了样式功能，现在你可以很容易地对每件东西进行样式设计。在这个版本中，有一些API的变化，所以在升级之前请小心，并在继续之前检查例子。

至于渲染速度，你应该把渲染引擎从Mathjax换成比Mathjax快得多的Katex。renderingEngine:RenderingEngine.Katex

Answer 2

现在也有了 catex 包裹 (充分披露：我是一名作者)。

CaTeX 不需要网页视图，这就是为什么你可以将你的方程呈现得非常好。迅速 基本上和其他小工具一样快）。

注注意：目前还处于预发布阶段，这意味着很多功能还不支持。

import 'package:catex/catex.dart';

Widget build(BuildContext context) => CaTeX(r'x = {-b \pm \frac{\sqrt{b^2-4ac}}  {2a}}');