CODEWITHSUNDEEP
dartflutter
spongyboss
spongyboss

Reputation: 8666

Flutter change textfield underline Color

I am trying to change the underline color of a textfield when it's inactive/not focused. I am not sure where to make this change, InputDecorationTheme is only changing the underline color for when it's selected. How do I achieve this?

inputDecorationTheme: new InputDecorationTheme(
          labelStyle: new  TextStyle(
              color: Colors.blue[200],
          ),
          hintStyle: new TextStyle(color: Colors.grey),
        ),

I am trying to change this color the textfield to a lighter grey when it's not selected/out of focus.

enter image description here

Upvotes: 5

Views: 17332

Answers (2)

AskNilesh
AskNilesh

Reputation: 69689

We can use InputDecoration

Try this way

 new TextFormField(
                        controller: passTextController,
                        decoration: new InputDecoration(
                            labelText: "Enter password",
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                              //  when the TextFormField in unfocused 
                            ) ,
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.blue),
                              //  when the TextFormField in focused 
                            ) ,
                            border: UnderlineInputBorder(
                            )
                        ),
                        keyboardType: TextInputType.text,
                        obscureText: true,
                      ),

OUTPUT

enter image description here

Upvotes: 5

spongyboss
spongyboss

Reputation: 8666

For those who might need to achieve something similar, change the hintColor in your Theme widget. 

new Theme(
          data: new ThemeData(
              //this changes the colour
              hintColor: Colors.grey,
              inputDecorationTheme: new InputDecorationTheme(
                  labelStyle: new TextStyle(color: Colors.blue))));

Upvotes: 8

Related Questions