How to Add Icon Button in Flutter

In this blog post, I will show you how to add an icon button in flutter. Before starting you should know what an icon button is. An Icon button is an icon which reacts to touches by filling the color. It is included in Material widget.

Using IconButton widget itself you can’t change the filled background color of the icon. In such cases, you should wrap the IconButton widget with Ink widget. Following is a flutter example which shows how to add an icon button.


import 'package:flutter/rendering.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Button Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Ink(
          decoration: ShapeDecoration(
            color: Colors.green,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(Icons.android),
            color: Colors.white,
            onPressed: () {
              print("You Pressed the icon!");
            },
          ),
        ),
      ),
    );
  }
}

The output of flutter example is as given below:

That’s how you add icon buttons in flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *