Reputation: 525
Goal: Changing the color of the prefixIcon
next to the TextField
when clicking on the TextField
.
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outline),
hintText: 'Username'
)
)
Upvotes: 28
Views: 51365
Reputation: 155
If you want to change the Icon color in TextField From the Theme, just need the code below.
MaterialApp(
ThemeData(inputDecorationTheme:
const InputDecorationTheme(
prefixIconColor: Color(0Xff2e3c35),
suffixIconColor: Color(0Xff2e3c35)),))
Upvotes: 0
Reputation: 11
Just specify prefixIconColor
property in inputDecoration
. If it's not specified then it will take MaterialStatProperty
by Default
.
Here is Example
TextFormField(decoration: InputDecoration(
prefixIcon: const Icon(Icons.search,),
prefixIconColor: Colors.grey,
),
),
Upvotes: 1
Reputation: 173
If you don't want to change the whole app theme just for 1 behavior of the field, you can use MaterialStateColor class from dart and switch colors based of the state.
Here is an example
InputDecoration(
prefixIcon: widget.icon,
prefixIconColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.focused)
? Colors.black
: Colors.grey)
),
Upvotes: 15
Reputation: 103
try to add a ColorScheme with fromSeed Color inside your MaterialApp.
Color primaryAccentColor = const Color(0xFF4D70FF);
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData.light().copyWith(
colorScheme: ColorScheme.fromSeed(seedColor: primaryAccentColor),
),
...
);
Upvotes: 0
Reputation: 81833
In Flutter 2.5, you can set the active color of the icon in ColorScheme.primary
:
theme: ThemeData().copyWith(
colorScheme: ThemeData().colorScheme.copyWith(
primary: Colors.green,
),
),
Upvotes: 13
Reputation: 194
I was able to achieve that with
ThemeData(
colorScheme: ThemeData().colorScheme.copyWith(
primary:Colors.red,
),
),
inside MaterialApp or you add Theme on your TextFormField
Theme(
data:Theme.of(context).copyWith(
colorScheme: ThemeData().colorScheme.copyWith(
primary:Colors.red,
),
),
child:TextFormField()
)
Upvotes: 3
Reputation: 161
Convert StatefulWidget in state class create FocusNodes and use TextFormField
List<FocusNode> _focusNodes = [
FocusNode(),
FocusNode(),
];
@override
void initState() {
_focusNodes.forEach((node){
node.addListener(() {
setState(() {});
});
});
super.initState();
}
TextFormField(
focusNode: _focusNodes[0],
decoration: InputDecoration(
prefixIcon: Icon(
Icons.alternate_email,
color: _focusNodes[0].hasFocus ? Colors.green : Colors.grey,
),
hintText: "Email"),
),
Upvotes: 3
Reputation: 427
As per flutter's update, accentColor property has been deprecated.
https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties
OLD:
theme: ThemeData(
accentColor: Colors.blue,
),
NEW:
theme: ThemeData(
colorScheme: ThemeData().colorScheme.copyWith(
secondary: Colors.blue,
),
),
Upvotes: 11
Reputation: 651
I was able to accomplish this by modifying the accentColor
property at the MaterialApp
Theme level.
Upvotes: 0
Reputation: 51336
When Selected the color shown is app primaryColor:
of Theme.
One Way of changing is using Theme
Widget.
Theme(
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
labelText: "Email",
hintText: "[email protected]",
),
autofocus: true,
),
data: Theme.of(context)
.copyWith(primaryColor: Colors.redAccent,),
),
Other is to change primaryColor
at MaterialApp
Theme level.
Upvotes: 22