VOOZH about

URL: https://www.geeksforgeeks.org/flutter/flutter-iconbutton-widget/

⇱ Flutter - IconButton Widget - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Flutter - IconButton Widget

Last Updated : 23 Jul, 2025

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:

Output:

Comment
Article Tags:

Explore