In this tutorial, we’ll learn how to easily change Flutter textfield prefix icon color by using a practical Flutter example code.
Introduction: Flutter Textfield Prefix Icon Color
Prefix icon comes on the left side of Flutter textfield widget. Let’s first see its default color, then we’ll customize it using a practical example.
Default Color of Prefix Icon
In order to see that, we’ve to implement a simple Flutter textfield widget with a prefix icon. We also have wrapped this textfield with a Flutter padding widget to create a horizontal distance between the screen border and textfield(available in the complete source code in the end). See below code:
TextField( decoration: InputDecoration( prefixIcon: Icon( Icons.email, ), )
Change Flutter Textfield Prefix Icon Color
We can see in the above code that Flutter icon widget is passed to prefix icon constructor. We’ll be using color constructor of the same icon widget to change the color of prefix icon. This color constructor takes a color so for demonstration, we’ll pass a purple color to it. See below code:
prefixIcon: Icon( Icons.email, color: Colors.purple, )
As you can see in the above image that color of prefix icon is successfully changed.
So this is how you can provide any color of your choice to Flutter textfield prefix icon.
Feel free to ask if you still have any questions regarding the customization of prefix icon color in textfield widget. I’ll be more than happy to answer all.
The complete source code of customized Flutter textfield prefix icon color is given in the next section.
Custom Flutter Textfield Prefix Icon Color Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.email,
color: Colors.purple,
),
),
),
))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield prefix icon color. I’ll be looking forward to receive your valuable feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
