Open In App

Flutter - IconButton Widget

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
3 Likes
Like
Report

Flutter comes with different types of buttons like TextButton, ElevatedButton, OutlinedButton, etc. But most of the buttons are text-based. In this article, we are going to see how to implement the Flutter IconButton. It is one of the most widely used buttons in the Flutter library. First, as the name suggests, the icon button is the button that has an icon, and on tap, it does something. A sample video is given below to get an idea of what we are going to do in this article.

Constructor of IconButton

IconButton IconButton({
  Key? key,
  double? iconSize,
  VisualDensity? visualDensity,
  EdgeInsetsGeometry? padding,
  AlignmentGeometry? alignment,
  double? splashRadius,
  Color? color,
  Color? focusColor,
  Color? hoverColor,
  Color? highlightColor,
  Color? splashColor,
  Color? disabledColor,
  required void Function()? onPressed,
  void Function(bool)? onHover,
  void Function()? onLongPress,
  MouseCursor? mouseCursor,
  FocusNode? focusNode,
  bool autofocus = false,
  String? tooltip,
  bool? enableFeedback,
  BoxConstraints? constraints,
  ButtonStyle? style,
  bool? isSelected,
  Widget? selectedIcon,
  required Widget icon,
})

Note: onPressed and icon are the mandatory fields to implement while using IconButton.

Properties

Property

Description

alignment

Defines how to place the button on the widget tree.

autofocus

True if other widgets are not in focus, instead this widget is.

color

Defines the color of the Icon inside the button. 

constraints

Optional size constraints for the button.

disabledColor

The color to show when the widget is disabled.

enableFeedback

Whether detected gestures should provide acoustic and/or haptic feedback. 

focusColor

The color of the button when it is in focus.

hashCode

The hash code for this object. 

highlightColor

The secondary color (optional) of the button when it is pressed.

hoverColor

The Icon color while hovering over the Icon. 

icon

The icon to display inside the button. 

iconSize

The Icon's size inside the button. 

key

Controls how one widget replaces another widget in the tree.

mouseCursor

The type of cursor to show when it hovers over the widget. 

onPressed

The action to perform when the button is pressed.

padding

The padding to provide to the Icon.

runtimeType

A representation of the runtime type of the object.

splashColor

The color of the ripple effect is produced when the user presses the button. 

splashRadius

The splash radius.

tooltip

Text to represent the action when the button is pressed.

visualDensity

Defines how compact the icon button's layout will be.

Example Project

main.dart:

main.dart 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

// This widget will be shown as the
// home page of your application.
class GFG extends StatefulWidget {
  const GFG({Key? key}) : super(key: key);

  @override
  State<GFG> createState() => _GFGState();
}

class _GFGState extends State<GFG> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Creating a icon button
            IconButton(
              iconSize: 100,
              icon: const Icon(Icons.add),
              // the method which is called
              // when button is pressed
              onPressed: () {
                setState(() {
                  count++;
                });
              },
            ),
            // SizedBox used as the separator
            const SizedBox(height: 40),
            // Text widget used to display count
            Text("$count", style: TextStyle(fontSize: 50, color: Colors.blue)),
          ],
        ),
      ),
    );
  }
}

Output:


S

streamio
Improve
Article Tags :

Explore

Lightbox