Flutter:如何将数学方程封装在容器中

Question

我想制作一个问答应用程序，它的问题中可能包含数学方程。我检查了一些库(如flatter_math和catex(，它们非常适合渲染方程，但我面临的一个问题是没有文本换行选项。

举个例子，假设我有一个问题：；二次方程X^2+6X+8=0的解是什么&"；。我想把完整的文本和方程式一起包装在一个容器里。

你能给我一个解决这个问题的好方法吗？

下面是一个flatter_math包的示例。

Center(
child: SizedBox(
width: 300,
height: 200,
child: Math.tex(
r'text {What are the solutions of the quadratic equation } x^2+6x+8=0 text { this is some question text following the equation.}',
textStyle: TextStyle(fontSize: 25, color: Colors.black),
),
),
)

此代码不包装问题文本。相反，它会修剪文本。可能包裹不支持包裹。我只需要一种在实际文本之间添加公式的好方法。

Answer 1

我想这就是你想要的。要在多行上显示文本和方程式，请使用以下代码。

Center(
child: SizedBox(
width: 300,
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('What are the solutions of the quadratic equation'),
SizedBox(height: 2),
Math.tex(
r'x^2+6x+8=0',
textStyle: TextStyle(fontSize: 25, color: Colors.black),
),
SizedBox(height: 2),
Text('this is some question text following the equation'),
],
),
),
);

要在单行中使用文本和公式，请使用此

Center(
child: SizedBox(
width: 300,
height: 200,
child: Wrap(
direction: Axis.horizontal,
children: [
Text('What are the solutions of the quadratic equation '),
Math.tex(
r'x^2+6x+8=0',
textStyle: TextStyle(fontSize: 25, color: Colors.black),
),
Text(' this is some question text following the equation'),
],
),
),
);

Answer 2

SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(
"What is the solutions of the quadratic equation X^2 + 6X + 8 = 0 ?",
//style: GoogleFonts.shortStack(color: Colors.white),
),
),
),