Flutter – IconButton Widget

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);

  // 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(),
    );
  }
}

// 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",
        ),
      ),
      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:

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.