To change the UnderlineInputBorder properties in flutter

Question

I have a TextField(), I want to change the Underlineinput border color and the thickness of it since it looks to the thickness. I have tried my level to change it but it is not at all working.

I have followed these links but nothing worked for me :

• InputDecoration class in flutter
• InputBorder class in flutter
• To change the color of the underline of textfield

Tried so far is :

CODE:

decoration: InputDeocration(
   border: UnderlineInputBorder(
     borderSide: new BorderSide(
        color: Color.fromRGBO(173, 179, 191, 1),
        width: 0.5,
        style: BorderStyle.none
     )
   )
)

The only thing that works or changes the color here is for the focussedBorder and enabledBorder. I don't want this, so I'm looking forward to getting some good advice here.

It doesn't change anything. What I want is :

What I'm getting so far is this every time irrespective of the changes I make to the design :

Answer 1

You can change the Underlineinput border color and the thickness Using the enabledBorder and focusedBorder properties.

TextField(
 decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red,width: 2.0)),
    focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.teal,width: 5.0)),
    labelText: 'Your Email or Phone'
  )
)