IconButton Class in Flutter with Example

The most different button class provided in flutter is the IconButton Class. In this tutorial, we will walk you through the implementation and properties of the IconButton class for flutter in detail. An icon button allows users to take actions like searching, navigation, adding, etc, by simply pressing the button. This class does not have a regular button with some text in it but an icon in the form of a button. The icon serves as an identifier. To use an icon button you need to import the material component package for flutter i.e. “package:flutter/material.dart”. 

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

Parameters

An IconButton has majorly two parameters:

1. icon: T

This represents the button’s label

IconButton(
       icon: Icon(Icons.code),
     ),

2. onPressed: This represents the action to be executed when the button is pressed.

IconButton(
       onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
       icon: Icon(Icons.code),
     ),

Properties

• autofocus: gives a boolean value corresponding to the initial focus of the button.
• alignment: defines how the icon is positioned within the IconButton.
• focusNode: represents the focus node of the widget
• color: gives the color of the Icon inside the button. 
• constraints: represents the optional size constraints for the button.
• disabledColor: represents the color to show when the widget is disabled.
• enableFeedback: tells whether detected gestures should provide acoustic and/or haptic feedback. 
• focusColor: represents the color of the button when it is in focus.
• hashCode: gives the hash code for this object. 
• highlightColor: represents the button’s secondary color (optional) when it is pressed.
• hoverColor: represents the Icon color while hovering over the Icon
• iconSize: gives the icon’s size inside the button. 
• key: Controls how one widget replaces another widget in the tree.
• 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.
• mouseCursor: The type of cursor to show when it hovers over the widget. 
• padding: The padding to provide to the Icon.
• runtimeType: A representation of the runtime type of the object.

Methods

• build(BuildContext context): describes the part of the user interface represented by this widget
• createElement(): creates a StatelessElement to manage this widget’s location in the tree.
• debugDescribeChildren(): returns a list of DiagnosticsNode objects describing this node’s children
• debugFillProperties() : add additional properties associated with the node
• toDiagnosticsNode(): returns a debug representation of the object that is used by debugging tools.
• toString(): a string representation of this object.
• toStringDeep(): returns a string representation of this node and its descendants.
• toStringShallow(): returns a one-line detailed description of the object
• toStringShort(): a short, textual description of this widget. 

Adjusting Icon Color 

IconButton(
       color: Colors.green,
       onPressed: () {},
       icon: Icon(Icons.code),
     ),

Output:

Adjusting the Background Color

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          icon: Icon(Icons.code),
        ),
      ),

Output:

Changing SplashColor 

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellow,
          icon: Icon(Icons.code),
        ),
      ),

Output:

Adjusting Radius of Splash Color 

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellowAccent,
          splashRadius: 50,
          icon: Icon(Icons.code),
        ),
      ),

Output:

Adjusting the Highlight Color

 CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellowAccent,

          splashRadius: 50,
          highlightColor: Colors.red,
          icon: Icon(Icons.code),
        ),
      ),

Output:

Let us understand these with the help of an example

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(HomeApp());
}

class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
          splashColor: Colors.yellowAccent,
          splashRadius: 50,
          highlightColor: Colors.red,
          icon: Icon(Icons.code),
        ),
      ),
    ));
  }
}

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('This is your new screen')),
    );
  }
}

Output: