在Theme中设置TextFromField样式

Question

因此，在我的 flutter 应用程序中，我创建 TextFormField 用作输入，如下所示（并在脚手架中返回它）：

final password = TextFormField(
      controller: passController,
      autofocus: false,
      obscureText: true,
      decoration: InputDecoration(hintText: 'Password'),
      style: new TextStyle(color: Colors.orange),
);

我想更改

style

内的

themeData

属性，但我找不到要指定的属性。

我能找到的最接近的是

textTheme: new TextTheme(body1: new TextStyle(color: Colors.orange))

，但这对我的 TextFormField 没有任何作用。

如何设置TextFormField样式？请帮忙，我对 Dart 和编程都很陌生。我现在 13 岁，没有人能帮我解决这些事情。

P.S：如果需要，完整的代码位于 GitHub 上：https://github.com/Legolaszstudio/novynotifier

Answer 1

更新：

如果您想按 Flutter 应用程序的主题更改 TextField 中的文本。现在是 TextTheme 的 subtitle1。

textTheme: TextTheme(
    subtitle1: TextStyle(color: Colors.blue),
)

Answer 2

嗯！这是一个很长的问题。

TextFormField

是

TextField

的子类。

TextField

的默认样式可以从下面的源中找到。

final TextStyle style = themeData.textTheme.subhead.merge(widget.style);

因此，您的源代码有 2 种解决方案。

解决方案1

• 删除

  style

  属性输入到

  password

  。

final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: new TextStyle(color: Colors.orange), // ★ => Delete this.
);

• 从

  subhead

  定义自定义

  DataTheme

  样式并输入到 Material 应用程序中。

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)

解决方案2

• 从

  subhead

  定义自定义

  DataTheme

  样式并输入到 Material 应用程序中。

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)

• 将此副标题样式复制到

  password

final themes = Theme.of(context);
final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: themes.textTheme.subhead, // ★ => Update this.
);

Answer 3

2021 - 2022

排版的材料规范在 2021 年发生了显着变化，现在使用显示、标题、标题、正文和标签类型。 titleMedium 会影响您所有的 TextFields 和 TextFormFields。

这一事实在

TextTheme 类 文档中也得到了强调。

如果您将 titleMedium TextStyle 用于其他用途，您可以轻松地将 TextFields 和 TextFormFields 包装在主题小部件中，并专门为这些小部件更新此样式，如下所示：

Theme(
        data: Theme.of(context).copyWith(
            textTheme: Theme.of(context).textTheme.copyWith(
                  titleMedium: TextStyle(
                    fontSize: 12, 
                    fontWeight: FontWeight.w300,
                  ),
                )),
        child: TextField()
      ),

Answer 4

我相信你正在寻找

subhead

textTheme: TextTheme(
    subhead: TextStyle(color: Colors.orange),
)

Answer 5

2024

来自

TextField

style

 属性 

文档

[...] 如果为 null，则将使用

TextTheme.bodyLarge

。当文本字段为 

disabled

 时，将使用 

TextTheme.bodyLarge

 为 

opacity

 的 

0.38

。

如果

null

 且 

ThemeData.useMaterial3

 是 

false

，则将使用 

TextTheme.titleMedium

。当文本字段被禁用时，将使用 

TextTheme.titleMedium

 和 

ThemeData.disabledColor

。