How To Change Flutter Textfield Prefix Icon Color – Easy Example Code

flutter textfield prefix icon color

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,
            ),
      )
flutter textfield prefix icon default color
The default Flutter textfield prefix icon color can be seen in the above image.

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,
            )
flutter textfield prefix icon color

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

flutter textfield prefix 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: 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.

Leave a Comment

Your email address will not be published. Required fields are marked *