Flutter中ElevatedButton内LaTeX字体显示不一致问题求助

问题原因 #

ElevatedButton的默认主题会覆盖子组件的文本样式配置。按钮主题自带的textStyle会影响内部Math.tex的字体选择，导致它没有使用flutter_math_fork默认的数学字体，和外部公式的字体样式产生差异。

解决方法 #

方法1：显式指定Math.tex的数学字体 #

在Math.tex的textStyle中直接指定flutter_math_fork默认使用的数学字体（比如LatinModernMath），强制覆盖按钮主题的字体设置：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("Hello"),
    Math.tex(r'x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}', mathStyle: MathStyle.display, textStyle: TextStyle(fontSize: 32)),
    SizedBox(height: 10,),
    ElevatedButton(
      onPressed: ()=> print("sf"),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Math.tex(
          r'x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}', 
          mathStyle: MathStyle.display, 
          textStyle: TextStyle(
            fontSize: 32,
            fontFamily: 'LatinModernMath' // 显式指定数学字体
          )
        ),
      )
    ),
  ],
)

方法2：用Theme包裹Math.tex重置文本主题 #

通过Theme组件覆盖ElevatedButton内部的文本主题，避免按钮样式影响公式渲染：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("Hello"),
    Math.tex(r'x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}', mathStyle: MathStyle.display, textStyle: TextStyle(fontSize: 32)),
    SizedBox(height: 10,),
    ElevatedButton(
      onPressed: ()=> print("sf"),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Theme(
          data: ThemeData(
            textTheme: TextTheme(
              bodyLarge: TextStyle(fontSize: 32) // 重置文本样式，不干扰数学字体
            )
          ),
          child: Math.tex(
            r'x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}', 
            mathStyle: MathStyle.display, 
            textStyle: TextStyle(fontSize: 32)
          ),
        ),
      )
    ),
  ],
)

内容的提问来源于stack exchange，提问作者derChris