How To Change Flutter Icon Button Background Color

Flutter icon button background color

In this article, we both will be implementing the customization of Flutter icon button background color using an easy but proper Flutter example. I would love to have your attention while reading this post so you can have a clear practical knowledge of how to change Flutter icon button background color. I hope you are ready, if so then why waste time. Let’s get right into changing our Flutter icon button background color.

What is Flutter Icon Button Background Color?

Flutter icon button background color as the name already gave an idea that it is the background color of the icon button or you can say simply the color of button. In this post, we both will first see what the default Flutter icon button background color is then we will change it using a Flutter example.

Default Flutter Icon Button Background Color

In order to see the default background color of the Flutter icon button, we just have to implement a simple Flutter icon button widget class and also using the required onPressed and icon constructor. See the below code:

IconButton(

        onPressed: () {},

        icon: Icon(Icons.email),

      ),
Flutter icon button background color default

You can see that there is no background color of the Flutter icon button, just a clickable Flutter icon is shown.

Change Flutter Icon Button Background Color

As there is no direct constructor to change the Flutter icon button background color so we will change it by wrapping it with a simple Flutter container widget and give that container some color. See the below code:

Container(
        color: Colors.green,
        child: IconButton(
          onPressed: () {},
          icon: Icon(Icons.email),
        ),
      )
Flutter icon button background color custom
We now can see a Flutter icon button background color as shown in the above image. We can also change the shape of the Flutter icon button background using that container widget. Let’s see some of the shapes. See below:

Shape 1

Flutter icon button background color

Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.green,
        ),
        child: IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.email,
            color: Colors.white,
          ),
        ),
      )

Shape 2

Flutter icon button background color

Container(
        width: 150,
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.email,
            color: Colors.white,
          ),
        ),
      )
 So in this way you can change the Flutter icon button background color. Let me know in the comments if you still face any problems related to Flutter icon button background color. I would love to answer them.
Below is the source code in which multiple Flutter icon buttons are colored. Hope you will like it.

Custom Flutter Icon Button Background Color Source Code

Flutter icon button background 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.green,
            ),
            child: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.email,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
            child: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.email,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.purple,
            ),
            child: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.email,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    )));
  }
}

Conclusion

As a last point, we both now have a practical understand of how to customize Flutter icon button background color. I would love to hear your thoughts about this post. I have many other posts for you related to Flutter widgets, Flutter app development, Flutter animations, amazing Flutter templates with free source code, and many more. Thank you for reading this post.

Leave a Comment

Your email address will not be published.