How To Change Flutter Textformfield Suffix Icon Color – Easy Flutter Code Example

flutter textformfield suffix icon color

In this tutorial, we’ll learn how to easily change Flutter textformfield suffix icon color by using a proper practical Flutter example code.

Introduction: Flutter Textformfield Suffix Icon Color

Suffix icon comes on the right side of Flutter textformfield 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 textformfield widget. We’ve passed a Flutter icon widget to the suffix icon constructor of input decoration class.

We also have wrapped this textformfield with a Flutter padding widget to create a horizontal distance between textformfield and screen borders(available in the complete source code in the end). See below code:

TextFormField(
          decoration: InputDecoration(
        suffixIcon: Icon(
          Icons.visibility,
        ),
      ))
flutter textformfield default suffix icon color
The default Flutter textformfield suffix icon color can be seen in the above image.

Change Flutter Textformfield 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,
        )
flutter textformfield suffix icon color

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 textformfield suffix icon color.

Feel free to ask if you still have any questions regarding the customization of suffix icon color in textformfield. I’ll be more than happy to answer all your questions.

The complete source code of customized Flutter textformfield suffix icon color is given in the below section.

Custom Flutter Textformfield Suffix Icon Color Source Code

flutter textformfield suffix icon color

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: 30),
      child: TextFormField(
          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 textformfield 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.

Leave a Comment

Your email address will not be published.