IconButton Widget

What is IconButton Widget?

The default constructor creates an icon button.

IconButton(
            icon:
            color:
            onPressed:
          );

Default Constructor

The default constructor creates an icon button.

IconButton(
            icon:
            color:
            onPressed:
          );

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The icon parameter is to display the icon inside the button.

The color parameter is to color to use for the icon inside the button

The onPressed parameter is to callback that is called when the button is tapped or otherwise activated.

Code snippet

The following code snippet shows how to configure IconButton widget.

IconButton(
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          );

Demo Code

This example the icon button's background color is defined with an Ink widget whose child is an IconButton.

The icon button's filled background is a light shade of blue, it's a filled circle, and it's as big as the button is.

import 'package:flutter/material.dart';

class IconButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: Ink(
          decoration: const ShapeDecoration(
            color: Colors.lightBlue,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'IconButton Widget Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: IconButtonDemo(),
      ),
    );
  }
}

void main() => runApp(MyApp());