Mastering Flutter: Changing the Background Color of IconButton Widget

Introduction

Flutter, known for its flexibility and simplicity, enables developers to craft visually appealing and interactive applications effortlessly. Among its essential components, the IconButton Widget stands out, facilitating single-tap actions. However, customising the background color of an IconButton may pose a challenge for beginners. In this tutorial, we’ll guide you through the process of altering the background color of the IconButton Widget with practical examples, courtesy of FlutterCoder.in.

Before we move further, if anyone wants to learn it through video tutorial, check out this guide on youtube.

Understanding the IconButton Widget

Before delving into customisation, let’s grasp the fundamentals of the IconButtonWidget in Flutter. An IconButton is a button displaying an icon and triggering an action upon being pressed. It’s commonly employed for tasks such as navigation, deletion, or form submission. By default, IconButton Widgets possess a transparent background.

With Material 3, Flutter has introduced new types : Standard & Contained. IconButton itself is a Standard type however on other end, IconButton.filled , IconButton.filledTonal , IconButton.outlined are of type Contained.

Changing the Background Color

To modify the background color of an IconButton Widget, we’ll leverage the IconButton class and the style parameter of it in Flutter. Here's a systematic guide:

1. Import required package

import 'package:flutter/material.dart';

2. Establish a StatefulWidget

class IconButtonDemo extends StatefulWidget {
  const IconButtonDemo({super.key});

  @override
  State<IconButtonDemo> createState() => _IconButtonDemoState();
}

3. Define state class having an IconButton in center

class _IconButtonDemoState extends State<IconButtonDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Utils.getAppBar(context: context, title: 'Icon Button Demo'),
      body: Center(
        child: IconButton.filled(
          iconSize: 100,
          icon: const Icon(
            Icons.notification_add_outlined,
          ),
          onPressed: () {
            _displayMaterialBanner(context);
          },
        ),
      ),
    );
  }
}

Running this establishment will display an IconButton in center of screen with icon in center and while tapping it will call method titled as _displayMaterialBanner() .

With this outcome will be as below,

4. Customising background color of IconButton

Now, with the help of style parameter which accept value as of ButtonStyle class will be useful to modify background color of an IconButton . Check code below.

class _IconButtonDemoState extends State<IconButtonDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: Center(
        child: IconButton.filled(
          ...
          style: IconButton.styleFrom(
            backgroundColor: Colors.cyan,
          ),
          ...
        ),
      ),
    );
  }

With this outcome will be as below,

At the end

Customising the background color of IconButton Widget injects a sense of personalisation into your Flutter applications. By following the outlined steps, you can seamlessly incorporate this functionality into your projects. Experiment with diverse color schemes and unleash your creativity! For additional tutorials and resources on Flutter development, explore FlutterCoder.in as well as stay tuned for future articles. Happy coding!