Change Icon Color in Flutter  – The EASIEST Way

The Icon widget in Flutter is one of the most used widgets. It is used to represent the real-world object in a graphical manner. But sometimes you may want to change its default color. So in this tutorial, we’ll see how to change icon color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

• Steps to change icon color in Flutter
• Changing icon color globally
• Different ways of adding color

Steps to change icon color in Flutter

You can change icon color in Flutter, by directly changing its color parameter.

Here is the step by step instructions:

Step 1: Locate the file where you have placed the Icon widget.

Step 2: Inside the Icon, add color parameter and set the color of your choice.

Step 3: Run your app.

Code Example

Icon(
  Icons.flight,
  size: 104,
  color: Colors.deepPurpleAccent, //<-- SEE HERE
),

Changing icon color globally

In the previous section, we saw how to change the icon color at the page level. but sometimes you might be looking to have a common style across all the pages of your app. In that case, you might want to change the icon color at the app level.

You can change the icon color globally by defining the iconTheme and then adding the IconThemeData with color parameter.

Here’s how you do it:

Step 1: Locate the MaterialApp widget.

Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned.

Step 3: Inside the ThemeData add the iconTheme parameter and then assign the IconThemeData.

Step 4:Inside the IconThemeData add the color parameter and set its color.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    iconTheme: IconThemeData(color: Colors.purpleAccent), //<-- SEE HERE
  ),
  home: ChangeTextFieldBorderColorDemo(),
);

Output

Different ways of adding color

There are main three ways you can add color to the icon widget.

1. Colors.red: This is used to define from the predefined colors.
2. Color(0xffF02E65): This is used to have a custom color.
3. Color.fromARGB(255, 66, 125, 145): This is used to have color from the alpha, red, green, and blue color combination.

Code Example

Icon(
  Icons.flight,
  size: 104,
  color: Colors.deepPurpleAccent, //<-- SEE HERE
),
Icon(
  Icons.train,
  size: 104,
  color: Color(0xffF02E65), //<-- SEE HERE
),
Icon(
  Icons.train,
  size: 104,
  color: Color.fromARGB(255, 66, 125, 145), //<-- SEE HERE
),

Conclusion

In this tutorial, we learned how to change icon color in Flutter with practical examples, we first saw how to change the color at the page level and then explored the way to change color at the app level. Finally, we also learned what are the different ways to add colors.

Would you like to check other interesting Flutter tutorials?