Flutter – IconButton Widget
Last Updated :
29 Apr, 2022
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 having an icon, and ontap it does something. A sample video is given below to get an idea about what we are going to do in this article.
Constructor
IconButton
(
{
Key? key,
double? iconSize,
VisualDensity? visualDensity,
EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
AlignmentGeometry alignment = Alignment.center,
double? splashRadius,
Color? color,
Color? focusColor,
Color? hoverColor,
Color? highlightColor,
Color? splashColor,
Color? disabledColor,
required VoidCallback? onPressed,
MouseCursor? mouseCursor,
FocusNode? focusNode,
bool autofocus = false,
String? tooltip,
bool enableFeedback = true,
BoxConstraints? constraints,
required Widget icon
}
)
Note: onPressed and icon are the mandatory fields to implement while using IconButton.
Properties
- 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: 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 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
The main.dart file:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
);
}
}
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",
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
iconSize: 100,
icon: const Icon(
Icons.add,
),
onPressed: () {
setState(
() {
count++;
},
);
},
),
const SizedBox(
height: 40,
),
Text(
"$count",
style: TextStyle(fontSize: 50, color: Colors.blue),
),
],
)),
);
}
}
|
Output:
If the properties are defined as below:
IconButton(
iconSize: 100,
icon: const Icon(
Icons.add,
),
onPressed: () {
setState(
() {
count++;
},
);
},
),
The following design output will be obtained:
Explanation:
- Create IconButton wrapped around Center Widget to make it center.
- Provide it with an icon and change the size of the icon using iconSize parameter.
- Implement the required onPressed method.
- Provide optional hoverColor, focusColor, splashColor parameter to IconButton.
Similar Reads
Flutter - TextButton Widget
TextButton is a built-in widget in Flutter which derives its design from Google’s Material Design Library. It is a simple Button without any border that listens for onPressed and onLongPress gestures. It has a style property that accepts ButtonStyle as value, using this style property developers can
3 min read
Flutter - FlutterLogo Widget
FlutterLogo widget is as simple as it sounds, it is just the flutter logo in the form of an icon. This widget also comes built-in with Flutter SDK. This widget can found its use as a placeholder for an image or icon. Below we will see its implementation with all its properties and constructor. Const
3 min read
RotatedBox Widget in Flutter
The RotatedBox widget is used to rotate its child by an integral number of quarter turns. It is used to orient its child widgets into either horizontal or vertical orientation. Furthermore, it is very lightweight and can be used for designing various UI as it gives flexibility to the user over the D
2 min read
Flutter - SizedBox Widget
SizedBox is a built-in widget in flutter SDK. It is a simple box with a specified size. It can be used to set size constraints to the child widget, put an empty SizedBox between the two widgets to get some space in between, or something else. It is somewhat similar to a Container widget with fewer p
3 min read
Flutter - SizeTransition Widget
In this article, we will explore the Flutter SizeTransition Widget. The Size Transition Widget is a key tool in Flutter that lets you animate the size of a child widget. It can be used to make a widget appear or vanish, create a zoom-in or zoom-out effect, and for many more things. A sample video is
7 min read
Flutter - Inherited Widget
If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read
Flutter - OctoImage Widget
The OctoImage widget in Flutter requires an ImageProvider to display images in an application. The images in the OctoImage widget can be supplied with a Progress indicator or a Place holder for loading the Image in it. An OctoImage widget makes use of the Octosets which are nothing but the combinati
4 min read
Flutter - InkWell Widget
InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of
2 min read
Opacity Widget in Flutter
The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child
2 min read
Flutter - RadioListTile Widget
RadioListTile is a widget that combines a radio button with a list tile. It is often used in scenarios where you need to present a list of mutually exclusive options, and the user can select one option from the list. Each RadioListTile represents a single option in the list and consists of a title,
6 min read