To change the UnderlineInputBorder properties in flutter

5
votes

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 :

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 :

Required Result

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

Result

1
flutteruitextfield

1 Answers

13
votes

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'
  )
)