Flutter Web中TextFormField验证错误后hover边框颜色不显示问题

问题原因 #

你设置的hoverColor仅控制输入框填充区域的hover颜色，而非边框颜色。当TextFormField验证失败进入错误状态时，会自动使用默认的红色errorBorder，但默认逻辑不会在hover时改变错误状态下的边框样式，导致hover效果无法显示。

解决方案 #

通过MouseRegion监听鼠标hover状态，结合表单错误状态动态调整边框样式，将TextFormField封装为StatefulWidget即可解决：

class MobileInputField extends StatefulWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final Color textColorPrimary;
  final Color primaryColor;
  final FlavorConfig? flavorConfig;

  const MobileInputField({
    super.key,
    required this.controller,
    required this.focusNode,
    required this.textColorPrimary,
    required this.primaryColor,
    this.flavorConfig,
  });

  @override
  State<MobileInputField> createState() => _MobileInputFieldState();
}

class _MobileInputFieldState extends State<MobileInputField> {
  bool _isHovering = false;
  bool _hasError = false;

  @override
  Widget build(BuildContext context) {
    // 获取当前表单字段的错误状态
    final formFieldState = FormField.of(context);
    _hasError = formFieldState?.hasError ?? false;

    return MouseRegion(
      onEnter: (_) => setState(() => _isHovering = true),
      onExit: (_) => setState(() => _isHovering = false),
      child: TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            widget.focusNode.requestFocus();
            return 'Mobile number is Required';
          }

          if (value.length != 10) {
            widget.focusNode.requestFocus();
            return 'Please enter valid mobile number';
          }

          return null;
        },
        style: TextStyles.customFont(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: widget.textColorPrimary,
        ),
        controller: widget.controller,
        focusNode: widget.focusNode,
        keyboardType: TextInputType.number,
        inputFormatters: const [FilteringTextInputFormatter.digitsOnly],
        maxLength: 10,
        textInputAction: TextInputAction.next,
        decoration: InputDecoration(
          filled: true,
          hoverColor: Colors.red,
          counter: const Offstage(),
          labelText: "Mobile",
          labelStyle: TextStyle(
            color: (widget.flavorConfig?.darkModeColorChange ?? false) &&
                    Theme.of(context).brightness == Brightness.dark
                ? Colors.white60
                : widget.primaryColor,
          ),
          border: const OutlineInputBorder(),
          // 正常状态边框（含hover）
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: _isHovering && !_hasError ? Colors.red : Colors.black,
              width: 2.0,
            ),
            borderRadius: BorderRadius.circular(25.0),
          ),
          // 错误状态边框（含hover）
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              // hover时用更深红色增强区分度
              color: _isHovering ? Colors.deepRed : Colors.red,
              width: 2.0,
            ),
            borderRadius: BorderRadius.circular(25.0),
          ),
          // 聚焦错误状态边框（含hover）
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: _isHovering ? Colors.deepRed : Colors.red,
              width: 2.0,
            ),
            borderRadius: BorderRadius.circular(25.0),
          ),
          // 正常聚焦状态边框
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.black, width: 2.0),
            borderRadius: BorderRadius.circular(25.0),
          ),
        ),
      ),
    );
  }
}

使用方式 #

在原页面中替换原有TextFormField为这个自定义组件：

MobileInputField(
  controller: mobileController,
  focusNode: fMobile,
  textColorPrimary: textColorPrimary(context),
  primaryColor: primaryColor,
  flavorConfig: flavorConfig,
)

关键说明 #

1. MouseRegion监听鼠标进入/离开事件，实时更新hover状态
2. 通过FormField.of(context)获取输入框的错误状态，动态切换边框样式
3. 分别为正常状态、错误状态、聚焦错误状态设置带hover逻辑的边框，覆盖默认样式
4. 错误状态下hover时使用更深色的红色，让hover效果更直观

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