How to change color style of TextField in flutter

Question

I have a simple TextField widget like this

TextField(
      obscureText: widget.placeholder == "Password" ? _isHidePassword : false,
      decoration: InputDecoration(
        
        hintText: "${widget.placeholder}",
        hintStyle: TextStyle(
          color: Colors.grey,
        ),
        // labelText: "${widget.placeholder}",
        // labelStyle: TextStyle(color: greenMain),
      ),
    )

and it gives the result like this picture:

is there a way to change the blue color into another? like red or green one ?

score 2 · Answer 1 · edited Apr 10 '21 at 07:13

2

You can use the decoration on TextField like this:

decoration: InputDecoration(
hintText: 'Type Text Here',        
enabledBorder: UnderlineInputBorder(      
borderSide: BorderSide(color: Colors.red),   
),

And this will change the line to color red.

I hope i help you

edited Apr 10 '21 at 07:13

Adel B-Lahlouh

1,059
1
8
20

answered Apr 10 '21 at 06:39

Osama Abu-Tareih

21
5

1

thank you for the answer, I have try it, the line color become red but whenever I click the TextForm, the color will change into blue again – wahyu Apr 10 '21 at 08:16
You'll need to use the focusedBorder property in that case @uyhaW – Aulig Apr 05 '22 at 11:41

score 1 · Accepted Answer · answered Apr 10 '21 at 06:34

lets try

Theme(
        data: new ThemeData(
          primaryColor: Colors.redAccent,
          primaryColorDark: Colors.red,
        ),
        child: TextField(
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            
            labelText: "Text field*",
          ),
        ),
      ),

How to change color style of TextField in flutter

2 Answers2