如何在Flutter中定义自定义文本主题？

Question

如何制作自己的文字主题样式？我只能找到这样的默认文本主题，但还不够。

textTheme: TextTheme(
  body1: TextStyle(),
  body2: TextStyle(),
  button: TextStyle(),
  caption: TextStyle(),
  display1: TextStyle(),
  display2: TextStyle(),
  display3: TextStyle(),
  display4: TextStyle(),
  headline: TextStyle(),
  overline: TextStyle(),
  subhead: TextStyle(),
  subtitle: TextStyle(),
  title: TextStyle(),
),

例如，我想要一个带有直行的文本，然后其他带有下划线的文本，我想覆盖body2for下划线样式，然后如何定义另一种样式来设置直行？

亲切的问候

Answer 1

这是使用带有 lineThrough 的扩展方法的替代方法：

extension CustomStyles on TextTheme {
 TextStyle get error => const TextStyle(decoration: TextDecoration.lineThrough, fontSize: 20.0, color: Colors.blue, fontWeight: FontWeight.bold);

然后你可以像这样使用它：

Text("your text", style: Theme.of(context).textTheme.error)

Answer 2

从 dart 2.7 开始，你还可以使用扩展方法：

extension CustomStyles on TextTheme {
  TextStyle get error {
    return TextStyle(
      fontSize: 18.0,
      color: Colors.red,
      fontWeight: FontWeight.bold,
    );
  }
}

然后你可以像这样使用它：

Text(error, style: Theme.of(context).textTheme.error)

Answer 3

您可以创建一个类来保留您的样式，然后在应用程序中的任何位置调用它。

class CustomTextStyle {
  static TextStyle display5(BuildContext context) {
    return Theme.of(context).textTheme.display4.copyWith(fontSize: 192.0);
  }
}

并将其用作

Text(
   'Wow',
   style: CustomTextStyle.display5(context),
),

看问题Flutter：定义自定义TextStyles以在整个应用程序中使用，其中包含此处引用的完整答案。