How can a change the underline color of textField in flutter?

Question

I have tried to define the Input decoration to change the color of underline of input TextField. But it's not working. can anyone suggest what am i missing here ?

Here is the Code snippet :

decoration: InputDecoration(
    hintText: 'Username',
    hintStyle: TextStyle(color: Colors.white),
    border: new UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white, 
                                      width: 1.0, style: BorderStyle.none ),
    ),

Solution 1

decoration: InputDecoration(
  hintText: 'Username',
  hintStyle: TextStyle(color: Colors.white),
  enabledBorder: new UnderlineInputBorder(
    borderSide: BorderSide(
      color: Colors.white, 
      width: 1.0, 
      style: BorderStyle.none 
    ),
  ),
),

Just change border to enabledBorder. Hope this help!

Solution 2

We have to use both enabledBorder and focusedBorder.

• enabledBorder: It will work when TextField not having focus.
• focusedBorder: It will work when TextField has the focus.

enabledBorder: new UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.black
  ),
),
// and:
focusedBorder: new UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.black
  ),
),

Solution 3

You have to put widget hierarchy under MaterialApp.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter WebView Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
          home: new Container(
             **//put widget here.**
        ));
  }
}

Solution 4

Just used -:

decoration: InputDecoration(        
  focusedBorder: UnderlineInputBorder(      
    borderSide: BorderSide(color: Colors.cyan),   
  ),    
),

it works for me :)

Solution 5

You can wrap your TextField in Theme and change accentColor like:

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.red),
  child: TextField(),
)

View more solutions

Comments

[Loolooii]

This only works for focused state and does nothing to the normal state.