如何在Flutter的TextFormField主题中添加textStyle？

当然可以通过主题实现这个需求。你需要明确：InputDecorationTheme负责的是输入框的装饰样式（比如边框、提示文本、标签等），而输入内容的文本样式，需要通过ThemeData中的textTheme来统一配置。

具体步骤： #

1. 保留你现有的InputDecorationTheme，它负责输入框的边框、提示文本等装饰样式，无需修改这部分代码。

2. 在ThemeData中配置默认文本样式：
   TextFormField的默认文本样式会继承ThemeData.textTheme.bodyLarge，因此只需在构建主题时设置这个样式即可，所有TextFormField会自动应用该样式。

完整代码示例： #

1. 主题配置代码

// 你的InputDecorationTheme保持不变
class MyTextFormFieldTheme {
  static InputDecorationTheme lightInputDecorarationTheme =
      InputDecorationTheme(
    errorMaxLines: 3,
    prefixIconColor: Colors.grey,
    suffixIconColor: Colors.grey,
    labelStyle: const TextStyle().copyWith(fontSize: 14, color: Colors.black),
    hintStyle: const TextStyle().copyWith(fontSize: 14, color: Colors.black),
    errorStyle: const TextStyle().copyWith(fontStyle: FontStyle.normal),
    floatingLabelStyle:
        const TextStyle().copyWith(color: Colors.black.withOpacity(0.8)),
    border: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: const BorderSide(width: 1, color: Colors.grey),
    ),
    enabledBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: const BorderSide(width: 1, color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: const BorderSide(width: 1, color: Colors.black12),
    ),
    errorBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: const BorderSide(width: 1, color: Colors.red),
    ),
    focusedErrorBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: const BorderSide(width: 2, color: Colors.orange),
    ),
  );
}

// 构建包含文本样式的主题
ThemeData buildLightTheme() {
  return ThemeData(
    brightness: Brightness.light,
    // 应用你的输入框装饰主题
    inputDecorationTheme: MyTextFormFieldTheme.lightInputDecorarationTheme,
    // 设置TextFormField的默认文本样式
    textTheme: const TextTheme(
      bodyLarge: TextStyle(
        fontSize: 18,
        color: Colors.blue,
      ),
    ),
  );
}

2. 修改后的TextFormField代码

现在可以移除每个TextFormField中的style属性，它会自动继承主题中的配置：

Expanded(
  child: TextFormField(
    controller: controller.firstName,
    decoration: const InputDecoration(
      hintText: 'First Name',
      prefixIcon: Icon(Icons.person),
    ),
    validator: (text) => MyValidator.validateEmtpyText('FirstName', text),
  ),
),

补充说明： #

如果需要单独为某个TextFormField设置特殊样式，仍然可以在该组件上添加style属性，它会覆盖主题中的默认样式。

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