Flutter如何实现TextFormField首词自动大写且后续字符可自由大小写

问题原因 #

原有自定义TextInputFormatter的字符串处理逻辑存在缺陷：capitalize方法对首字母后的所有内容调用了toLowerCase()强制转小写，导致后续输入的大写字符会被自动转换为小写，无法自由控制后续单词的大小写。

修复方案 #

重写输入格式化器，仅对输入内容的首个字符做大写转换，完全保留首字符之后用户输入的原始大小写，同时保留原有的textCapitalization: TextCapitalization.words配置即可，该配置会默认唤起适配单词首字母大写的键盘，不影响用户手动切换大小写输入。

修正后的格式化器代码 #

class FirstWordUppercaseFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // 输入为空时直接返回原值
    if (newValue.text.trim().isEmpty) {
      return newValue;
    }
    final inputText = newValue.text;
    // 仅将第一个字符转为大写，后续字符完全保留用户输入的原始格式
    final processedText = '${inputText[0].toUpperCase()}${inputText.substring(1)}';
    return TextEditingValue(
      text: processedText,
      selection: newValue.selection,
    );
  }
}

字段引用方式 #

将原有TextFormField的inputFormatters配置中旧的格式化器替换为新写的FirstWordUppercaseFormatter即可，其余代码无需改动：

TextFormField(
  decoration: const InputDecoration(hintText: "Name"),
  controller: nameController,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Please enter your name";
    }
    return null;
  },
  textCapitalization: TextCapitalization.words,
  inputFormatters: <TextInputFormatter>[
    FirstWordUppercaseFormatter()
  ],
)

实现效果 #

• 输入首个字符时会自动转为大写，例如输入s会自动变为S
• 首字符之后的所有内容不会被强制转换大小写，用户可自由输入大写或小写字符，可正常实现Steven Jhons这类格式的输入
• 搭配TextCapitalization.words配置，输入空格开启新单词时，键盘会默认优先输入大写字母，减少用户手动切换大小写的操作，用户需要输入小写时也可正常切换，不会被格式化器拦截。

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