![]() |
VOOZH | about |
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.
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.
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. |
main.dart: