Flutter - How to change TextField hint color?
FlutterTextfieldFlutter Problem Overview
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,
),
),
),
Flutter Solutions
Solution 1 - Flutter
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 - Flutter
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 - Flutter
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
))
Solution 4 - Flutter
If you want to change the hintColor of all the TextField Widget in the app, you can apply it in the Theme.
example code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light().copyWith(
hintColor: Colors.orange,
),
home: Scaffold(
body: Column(children: [
TextField(
decoration: InputDecoration(
hintText: "Email",
),
),
TextField(
decoration: InputDecoration(
hintText: "Password",
),
),
]),
),
);
}
}
Solution 5 - Flutter
After digging the source code for the InputDecorator used to determine the label color, here's what I found.
TextStyle _getFloatingLabelStyle(ThemeData themeData) {
final Color color = decoration.errorText != null
? decoration.errorStyle?.color ?? themeData.errorColor
: _getActiveColor(themeData);
final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
return style
.copyWith(color: decoration.enabled ? color : themeData.disabledColor)
.merge(decoration.labelStyle);
}
Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
switch (themeData.brightness) {
case Brightness.dark:
return themeData.accentColor;
case Brightness.light:
return themeData.primaryColor;
}
}
return themeData.hintColor;
}
In short, to change the hint color, set hintColor using Theme and ThemeData.
Another tip: to change the label color, set the primaryColor light theme, or accentColor for dark theme.
ThemeData.dark().copyWith(
primaryColor: Colors.red,
accentColor: Colors.white,
hintColor: Colors.pink,
)
Solution 6 - Flutter
TextField(
decoration: InputDecoration(
hintText: 'your hint',
hintStyle: Theme.of(context).textTheme.caption.copyWith(
fontSize: 20,
fontWeight: FontWeight.w600,
color: ColorConstants.kTextColor, <--- // Set Your Own Color
),