Flutter - IconButton Widget
Last Updated :
08 Jun, 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:
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:
Similar Reads
Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Android Studio Setup for Flutter Development This article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
10 Best Flutter Projects with Source Code in 2025 Are you eager to begin your journey into Flutter app development but find yourself unsure of where to start? Look no further! This article serves as a comprehensive guide for aspiring developers, offering a wide range of innovative Flutter project ideas. Whether you're looking to refine your skills
7 min read
Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan
3 min read
Flutter - AppBar Widget AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of the
8 min read