Home > Enterprise >  How to change text field underline error color?
How to change text field underline error color?

Time:11-25

How to change for the TextFormField underline error color? When validator returns not null the underlying color for the text field is getting red (when theme brightness is dark).

enter image description here

TextFormField(
  decoration: InputDecoration(
    labelText: AppLocalizations.key(context, 'formPassword'),
    icon: Icon(Icons.lock
    hintText: AppLocalizations.key(context, 'enterYourPassword'),
  ),
  validator: (val) {
    val = val.trim();
    if (validatePassword(val) == false) {
      return AppLocalizations.key(context, 'passwordNotAccepted');
    }
    password = val;
    return null;
  },
  initialValue: '',
  onSaved: (val) => {},
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
),

CodePudding user response:

enter image description here

enter image description here

enter image description here

Please refer below code

class MainScreen extends StatelessWidget {
  MainScreen({Key key}) : super(key: key);

  final TextEditingController addressController = TextEditingController();
  final FocusNode addressFocus = FocusNode();

  int validateAddress(String address) {
    String patttern = r'(^[a-zA-Z0-9 ,.-]*$)';
    RegExp regExp = new RegExp(patttern);
    if (address.isEmpty || address.length == 0) {
      return 1;
    } else if (address.length < 10) {
      return 3;
    } else {
      return 0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightBlue,
        automaticallyImplyLeading: true,
        leading: Icon(
          Icons.arrow_back,
        ),
        title: Text("Example"),
        centerTitle: true,
      ),
      body: Container(
          padding: EdgeInsets.all(15.0),
          child: Center(
            child: TextFormField(
              autovalidate: true,
              controller: addressController,
              inputFormatters: [
                FilteringTextInputFormatter.deny(RegExp(r"\s\s")),
                FilteringTextInputFormatter.deny(RegExp(
                    r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
              ],
              keyboardType: TextInputType.text,
              maxLength: 60,
              onChanged: (val) {},
              maxLines: 1,
              validator: (value) {
                int res = validateAddress(value);
                if (res == 1) {
                  return "Please enter address";
                } else if (res == 3) {
                  return "Please enter minimum 10 characters";
                } else {
                  return null;
                }
              },
              focusNode: addressFocus,
              autofocus: false,
              decoration: InputDecoration(
                errorMaxLines: 3,
                counterText: "",
                filled: true,
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                disabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                  ),
                ),
                errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    borderSide: BorderSide(
                      width: 1,
                      color: Colors.red,
                    )),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Colors.red,
                  ),
                ),
                hintText: "Hint Text" ?? "",
              ),
            ),
          )),
    );
  }
}


CodePudding user response:

Try below code hope its help to you.

InputDecoration(
      errorBorder: OutlineInputBorder(
      borderSide: BorderSide(
      color: Colors.amber,
     ),
    ),
  errorStyle: TextStyle(
  color: Colors.blue,
 ),
),

Your complete widget.

                 TextFormField(
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Please Enter Brand Name';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Colors.amber,
                            ),
                          ),
                          errorStyle: TextStyle(
                            color: Colors.blue,
                          ),
                          border: OutlineInputBorder(),
                          labelText: 'Brand Name',
                          hintText: 'Brand Name',
                        ),
                      ),

Your Screen-> image

  • Related