In this tutorial, we’ll learn how to easily change Flutter textfield suffix icon color by using a proper practical Flutter example code.
Introduction: Flutter Textfield Suffix Icon Color
Suffix icon comes on the right side of Flutter textfield widget. Let’s first see its default color, then we’ll customize it using a practical Flutter example code.
Default Color: Suffix Icon
In order to see that, we’ve created a simple Flutter textfield widget. We’ve passed a Flutter icon widget to the suffix icon constructor of input decoration class.
We also have wrapped this textfield with a Flutter padding widget to create a horizontal distance between textfield and screen borders(available in the complete source code in the end). See below code:
TextField( decoration: InputDecoration( suffixIcon: Icon( Icons.visibility, ), ))
Change Flutter Textfield Suffix Icon Color
We can see in the above code that Flutter icon widget is passed to suffix icon constructor of input decoration class. We’ll be using color constructor of the same icon widget to change the color of suffix icon. This color constructor takes a color. For demonstration, we’ve passed a blue color to it. See below code:
suffixIcon: Icon( Icons.visibility, color: Colors.blue, )
As you can see in the above image that color of suffix icon is successfully customized.
So this is how you can easily change Flutter textfield suffix icon color.
Feel free to ask if you still have any questions regarding the customization of suffix icon color in textfield. I’ll be more than happy to answer all your questions.
The complete source code of customized Flutter textfield suffix icon color is given in the below section.
Custom Flutter Textfield Suffix 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: 20),
child: TextField(
decoration: InputDecoration(
suffixIcon: Icon(
Icons.visibility,
color: Colors.blue,
),
)),
))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield suffix icon color. I’ll be delighted to receive your feedback on this post.
I’d love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
