Flutter - How to change TextField hint color?
I'm a bit confused how to change the hint color of the textfield. Someone can guide me how to do it.Thanks
child: TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "Password",
border: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.teal,
),
),
prefixIcon: const Icon(
Icons.security,
color: Colors.white,
),
),
),
Solution 1:
You can do with hintStyle
: in InputDecoration
TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(fontSize: 20.0, color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.teal,
),
),
prefixIcon: const Icon(
Icons.security,
color: Colors.white,
),
),
),
Solution 2:
As an addition to the accepted answer, to update the focused hint decoration you have to update the app's Theme.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
inputDecorationTheme: const InputDecorationTheme(
labelStyle: TextStyle(color: Colors.black),
hintStyle: TextStyle(color: Colors.grey),
)),
home: MainScreen(),
);
}
Solution 3:
change both hintStyle and labelStyle
TextFormField(
decoration: InputDecoration(
hintText: '[email protected]',
labelText: 'Email',
hintStyle: TextStyle(color: Colors.white), # change to your color
labelStyle: TextStyle(color: Colors.white), # change color
))