Flutter：如何创建可切换类型的自定义TextFormField并实现验证？

核心问题分析 #

你的代码存在几个关键问题导致验证逻辑无法和Form正常集成：

1. 嵌套FormField与TextFormField，冗余且违背Flutter Form原生验证机制
2. 自定义errorText维护错误状态，未利用TextFormField的validator返回值驱动提示
3. 切换输入类型时未同步更新键盘类型，影响用户输入体验
4. 用数字count管理类型状态，可读性差且易出错

修正后的代码 #

import 'package:flutter/material.dart';
import '../../string_extensions.dart';
import 'customerrormsg.dart';

// 用枚举替代数字管理输入类型，提升可读性与可维护性
enum InputType { email, phone, idNumber }

class CustomTextField extends StatefulWidget {
  const CustomTextField({
    super.key,
    this.fgColor = Colors.lightBlue,
  });
  final Color fgColor;

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  late InputType _currentType;
  final TextEditingController _textEditingController = TextEditingController();

  // 集中管理各类型对应的提示文本、图标、键盘类型
  final Map<InputType, (String hint, IconData icon, TextInputType keyboardType)> _typeConfig = {
    InputType.email: (
      'E-mail',
      Icons.alternate_email,
      TextInputType.emailAddress,
    ),
    InputType.phone: (
      'Phone',
      Icons.call,
      TextInputType.phone,
    ),
    InputType.idNumber: (
      'ID Number',
      Icons.badge,
      TextInputType.text,
    ),
  };

  // 切换输入类型逻辑
  void _switchInputType() {
    setState(() {
      _textEditingController.clear();
      _currentType = switch (_currentType) {
        InputType.email => InputType.phone,
        InputType.phone => InputType.idNumber,
        InputType.idNumber => InputType.email,
      };
    });
  }

  // 根据当前类型执行验证，返回错误信息或null（符合Form验证规范）
  String? _validateField(String? value) {
    final trimmedValue = value?.trim();
    if (trimmedValue?.isEmpty ?? true) {
      return '${_typeConfig[_currentType]!.$hint} can\'t be empty!';
    }

    return switch (_currentType) {
      InputType.email => trimmedValue!.isValidEmail() ? null : 'Not a valid E-mail',
      InputType.phone => trimmedValue!.isValidMobile() ? null : 'Not a valid Phone',
      InputType.idNumber => trimmedValue!.isValidRoll() ? null : 'Not a valid ID Number',
    };
  }

  @override
  void initState() {
    super.initState();
    _currentType = InputType.email; // 默认初始为邮箱类型
  }

  @override
  Widget build(BuildContext context) {
    final currentConfig = _typeConfig[_currentType]!;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            color: const Color.fromRGBO(50, 50, 50, 1),
            borderRadius: BorderRadius.circular(15.0),
            boxShadow: const [
              BoxShadow(
                offset: Offset(1, 2),
                color: Color.fromRGBO(20, 20, 20, 1),
              )
            ],
          ),
          child: TextFormField(
            controller: _textEditingController,
            validator: _validateField,
            keyboardType: currentConfig.$3,
            decoration: InputDecoration(
              hintText: currentConfig.$1,
              suffixIcon: IconButton(
                splashRadius: 20.0,
                onPressed: _switchInputType,
                icon: Icon(
                  currentConfig.$2,
                  size: 20.0,
                  color: widget.fgColor,
                ),
              ),
            ),
          ),
        ),
        CustomErrorMsg(
          errorText: _validateField(_textEditingController.text),
          errorColor: Colors.red,
          errorIcon: Icons.error,
        ),
      ],
    );
  }
}

关键优化点 #

• 引入InputType枚举，彻底替代数字count管理类型，避免逻辑混乱
• 采用TextFormField原生validator返回错误信息，完美适配Form的validate()方法
• 切换类型时同步更新键盘类型，匹配不同输入场景的需求
• 集中管理类型配置，后续新增输入类型只需扩展枚举和配置Map即可
• 移除冗余的嵌套组件和自定义错误状态，简化整体逻辑

集成到Form的示例 #

Form(
  key: _formKey,
  child: Column(
    children: [
      CustomTextField(fgColor: Colors.lightBlue),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // 验证通过，执行提交逻辑
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
)

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