Have different border colours when Textformfield is inactive , active and filled-CodePudding

Is is possible to have a different border color for each state of the TextFormField in flutter ie when the field is not active , when active and not active but has text in the field

 TextFormField emailUserForm() {
return TextFormField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: textBlack50Color,
  autocorrect: false,
  validator: (text) => validateEmail(text!),
  onSaved: (name) {
    _email = name!;
    print('on save called');
  },
  decoration: const  InputDecoration(
    fillColor: Colors.white,
    filled: true,
    border:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlack50Color, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    labelStyle:  TextStyle(
        color: textBlack50Color,
        fontSize: 14,
        fontWeight: FontWeight.w500),
    hintStyle:  TextStyle(fontSize: 17),
    hintText: 'Your email address',
    focusedBorder:  OutlineInputBorder(
        borderSide: BorderSide(color: textBlackColor, width: 1.0),
        borderRadius: BorderRadius.all(Radius.circular(15.0))),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color:  textBlackColor , width: 1.0),
        borderRadius:  BorderRadius.all(Radius.circular(15.0))),
  ),
);

}

CodePudding user response：

Yes, you should set the specific properties inside the InputDecoration class. Based on the documentation, here are the different border styles:

[focusedBorder], displayed when [InputDecorator.isFocused] is true and [InputDecoration.errorText] is null.

[focusedErrorBorder], displayed when [InputDecorator.isFocused] is true and [InputDecoration.errorText] is non-null.

[disabledBorder], displayed when [InputDecoration.enabled] is false and [InputDecoration.errorText] is null.

[enabledBorder], displayed when [InputDecoration.enabled] is true and [InputDecoration.errorText] is null.

Code:

InputDecoration(
  <...>
  enabledBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.black),
  ),
  disabledBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey),
  ),
  errorBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
  focusedBorder: const OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blue),
  ),
);

CodePudding user response：

Try below code hope its help to you.

TextFormField(
  keyboardType: TextInputType.emailAddress,
  cursorColor: Colors.green,
  autocorrect: false,
  onSaved: (name) {
    print('on save called');
  },
  decoration: InputDecoration(
    fillColor: Colors.white,
    filled: true,
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.green, width: 5.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    labelStyle: TextStyle(
        color: Colors.brown, fontSize: 14, fontWeight: FontWeight.w500),
    hintStyle: TextStyle(fontSize: 17),
    hintText: 'Your email address',
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.purple, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.pink, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 1.0),
      borderRadius: BorderRadius.all(
        Radius.circular(15.0),
      ),
    ),
  ),
),

Your result without focus screen->

Your result with focus screen->