Search code examples
fluttertextfield

On hover in Flutter web, textfiled color does not appear

enter image description hereI have started building my Android app for a web application in Flutter, I am experiencing a problem where when a validator turns out to be wrong, the textfield color becomes red, but when I hover over it, the border color does not appear, see screenshot above.

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()),
                    ),
Solution

  • You can use focusedErrorBorder and errorBorder to customize the border color when there is an error.

    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(),
  ),
),