Flutter Question posted in
The official Flutter documentation can be found here.

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

2

Answers


  1. Chosen as BEST ANSWER
    0 
      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,
                            autofocus: true,
                            keyboardType: TextInputType.number,
                            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                            maxLength: 10,
                            textInputAction: TextInputAction.next,
                            decoration: InputDecoration(
                                counter: const Offstage(),
                                labelText: "Mobile",
                                labelStyle: TextStyle(
                                  color: (flavorConfig?.darkModeColorChange ?? false) &&
                                          Theme.of(context).brightness == Brightness.dark
                                      ? Colors.white60
                                      : primaryColor,
                                ),
                                focusedErrorBorder: OutlineInputBorder(
                                  borderSide: const BorderSide(color: Colors.red, width: 1.0),
                                  borderRadius: BorderRadius.circular(5.0),
                                ),
                                errorBorder: OutlineInputBorder(
                                  borderSide: const BorderSide(color: Colors.red, width: 1.0),
                                  borderRadius: BorderRadius.circular(5.0),
                                ),
                                border: const OutlineInputBorder()),
                          ),
    • The following is an example of how I implemented a mobile field textfield that works similarly to a mobile device

  2. 0

    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(),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search