flutter - How to disable an IconButton

Flutter - IconButton Disable

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.

The following flutter app development tutorial will demonstrate how to disable an IconButton widget. Here we will also set a color for the IconButton widget’s disabled state.

The IconButton class’s onPressed property value is a callback that is called when the button is tapped or otherwise activated. When the flutter developers set this property value to null, the button will be disabled. So in this flutter example code, we passed a null value for the IconButton onPressed property to disable the IconButton widget.

The IconButton class’s onPressed property value is a Color object that is the color to use for the icon inside the Button if the icon is disabled. The default value for this property is ThemeData.disabledColor of the current Theme. Here we set a color for the IconButton widget’s disabledColor property value.

So finally, the flutter app developers can disable an IconButton instance by setting null to its onPressed property and they can define the disabled state color by setting a value for the disabledColor property.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - IconButton Disabled")
          ),
          body: Center(
              child: IconButton(
                iconSize: 96,
                icon: const Icon(Icons.add_alarm_rounded),
                onPressed: null,
                color: Colors.green.shade700,
                disabledColor: Colors.blueGrey.shade200
              )
          )
      ),
    ),
  );
}