将鼠标悬停在 Flutter Web 中时，不会出现文本文件颜色

Question

我已经开始在 Flutter 中为 Web 应用程序构建 Android 应用程序，我遇到一个问题，当验证器出错时，文本字段颜色会变成红色，但是当我将鼠标悬停在它上面时，边框颜色会变成红色没有出现，请参见上面的截图。

TextFormField(
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          fMobile.requestFocus();
                          return 'Mobile number is Required';
                        }

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

                        return null;
                      },
                      style: TextStyles.customFont(
                          fontWeight: FontWeight.bold, fontSize: 16.0, color: textColorPrimary(context)),
                      controller: mobileController,
                      focusNode: fMobile,
                      keyboardType: TextInputType.number,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      maxLength: 10,
                      textInputAction: TextInputAction.next,
                      decoration: InputDecoration(
                          filled: true,
                          enabledBorder: OutlineInputBorder(
                            borderSide: const BorderSide(color: Colors.black, width: 2.0),
                            borderRadius: BorderRadius.circular(25.0),
                          ),
                          hoverColor: Colors.red,
                          counter: const Offstage(),
                          labelText: "Mobile",
                          labelStyle: TextStyle(
                            color: (flavorConfig?.darkModeColorChange ?? false) &&
                                    Theme.of(context).brightness == Brightness.dark
                                ? Colors.white60
                                : primaryColor,
                          ),
                          border: const OutlineInputBorder()),
                    ),

Answer 1

出现错误时可以使用

focusedErrorBorder

和

errorBorder

自定义边框颜色。

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      fMobile.requestFocus();
      return 'Mobile number is Required';
    }

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

    return null;
  },
  style: TextStyles.customFont(
    fontWeight: FontWeight.bold,
    fontSize: 16.0,
    color: textColorPrimary(context),
  ),
  controller: mobileController,
  focusNode: fMobile,
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  maxLength: 10,
  textInputAction: TextInputAction.next,
  decoration: InputDecoration(
    filled: true,
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.black, width: 2.0),
      borderRadius: BorderRadius.circular(25.0),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.red, width: 2.0),
      borderRadius: BorderRadius.circular(25.0),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.red, width: 2.0),
      borderRadius: BorderRadius.circular(25.0),
    ),
    counter: const Offstage(),
    labelText: "Mobile",
    labelStyle: TextStyle(
      color: (flavorConfig?.darkModeColorChange ?? false) &&
          Theme.of(context).brightness == Brightness.dark
          ? Colors.white60
          : primaryColor,
    ),
    border: const OutlineInputBorder(),
  ),
),