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),
),
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),
),
)
Shape 1
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.email,
color: Colors.white,
),
),
)Shape 2
Container(
width: 150,
decoration: BoxDecoration(
color: Colors.green,
),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.email,
color: Colors.white,
),
),
)Custom Flutter Icon Button Background 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 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,
),
),
),
],
),
)));
}
}
