flutter 如何根据主题更改TextFormField的文本颜色

lf5gs5x2  于 2023-10-22  发布在  Flutter
关注(0)|答案(4)|浏览(210)

我想改变输入的文字颜色,按照当前的主题,因为文字颜色是不是InputDecorationTheme的一部分。

到目前为止,唯一可能的方法来改变输入的文本颜色是给予风格TextFormField,但也不工作时,主题得到改变+以这种方式,我需要重复类似的代码为我的每一个文本字段在应用程序中可用。

20jt8wwn

20jt8wwn1#

您可以通过设置ThemeData来完成。

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subtitle1: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
    ),
  )
 ...
mzsu5hc0

mzsu5hc02#

你可以在TextTheme中使用属性subhead

theme: ThemeData( 
    brightness: Brightness.dark,
    primaryColor: Colors.orange,
    accentColor: Colors.green,
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.blue),
    ),
  ),

或者使用这个:

theme: ThemeData(
      brightness: Brightness.dark,
      primaryColor: Colors.orange,
      accentColor: Colors.green,
      textTheme: Theme.of(context)
          .textTheme
          .apply(bodyColor: Colors.red)`enter code here`

  ),

关于Flutter https://medium.com/flutter- community/beginners-guide-to-text-styling-in-flutter-3939085d6607中的文本样式的博客

**注意:**材料设计排版方案在当前(2018)版本的规范中有显著变化更多信息https://material.io/design/typography

2018年规范有13种文本样式:

NAME         SIZE  WEIGHT  SPACING
 headline1    96.0  light   -1.5
 headline2    60.0  light   -0.5
 headline3    48.0  regular  0.0
 headline4    34.0  regular  0.25
 headline5    24.0  regular  0.0
 headline6    20.0  medium   0.15
 subtitle1    16.0  regular  0.15
 subtitle2    14.0  medium   0.1
 body1        16.0  regular  0.5   (bodyText1)
 body2        14.0  regular  0.25  (bodyText2)
 button       14.0  medium   1.25
 caption      12.0  regular  0.4
 overline     10.0  regular  1.5

其中,“light”是FontWeight.w300,“regular”是FontWeight.w400,“medium”是FontWeight.w500
[TextTheme] API最初基于原始材质(2014)设计规范,该规范使用不同的文本样式名称。为了向后兼容,此API继续公开旧名称。下表应有助于理解API的旧名称和新名称(根据2018年材料规范)的Map。
每个[TextTheme]文本样式都对应于2018规范中的一种样式。默认情况下,字体大小、字体粗细和字母间距与2014年的原始值相比没有变化。

NAME       SIZE   WEIGHT   SPACING  2018 NAME
 display4   112.0  thin     0.0      headline1
 display3   56.0   normal   0.0      headline2
 display2   45.0   normal   0.0      headline3
 display1   34.0   normal   0.0      headline4
 headline   24.0   normal   0.0      headline5
 title      20.0   medium   0.0      headline6
 subhead    16.0   normal   0.0      subtitle1
 body2      14.0   medium   0.0      body1 (bodyText1)
 body1      14.0   normal   0.0      body2 (bodyText2)
 caption    12.0   normal   0.0      caption
 button     14.0   medium   0.0      button
 subtitle   14.0   medium   0.0      subtitle2
 overline   10.0   normal   0.0      overline
5lhxktic

5lhxktic3#

你似乎在看InputDecorationTheme而不是TextTheme
您正在寻找的颜色属性应该是textTheme.body1.color,如下所示:

Theme.of(context).textTheme.body1.color

如果不是这个,它应该是另一个textTheme属性。

jchrr9hc

jchrr9hc4#

使用ThemeData(仅适用于材料3)

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    textTheme: TextTheme(
      bodyLarge: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
    ),
  )
 ...

相关问题