How can I disable Button(IconButton) click?

Question

I try to assign null to click function but it does not work disabled color. I tried this code section.

  IconButton(
          disabledColor: Colors.redAccent,
          icon: Icon(
            Icons.hdr_enhanced_select,
            color: Colors.white,
          ),
          iconSize: 30,
          onPressed: selectionIsActive
              ? null
              : () {
                  setState(() {
                    selectionIsActive = true;
                  });
                }),

That is NOT the problem, providing null is the recommended way to disable a button. — ForestG, Dec 10 '20 at 08:53

score 2 · Accepted Answer · answered Dec 10 '20 at 08:56

You can copy paste run full code below
You can in Icon's color add condition color: selectionIsActive ? null: Colors.white
code snippet

IconButton(
    disabledColor: Colors.redAccent,
    icon: Icon(
      Icons.hdr_enhanced_select,
      color: selectionIsActive ? null: Colors.white,
    ),
    iconSize: 30,
    onPressed: selectionIsActive
        ? null
        : () {
            setState(() {
              selectionIsActive = true;
            });
          }),

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool selectionIsActive = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
                disabledColor: Colors.redAccent,
                icon: Icon(
                  Icons.hdr_enhanced_select,
                  color: selectionIsActive ? null: Colors.white,
                ),
                iconSize: 30,
                onPressed: selectionIsActive
                    ? null
                    : () {
                        setState(() {
                          selectionIsActive = true;
                        });
                      }),
          ],
        ),
      ),
    );
  }
}

score 0 · Answer 2 · answered Dec 10 '20 at 08:55

Icon/Color overwrites the disabledColor attribute. Use color attribute in as the buttons color in the case of an IconButton instead:

 IconButton(
          disabledColor: Colors.redAccent,
          color: Colors.white,
     
          icon: Icon(
            Icons.hdr_enhanced_select
          ),
          iconSize: 30,
          onPressed: selectionIsActive
              ? null
              : () {
                  setState(() {
                    selectionIsActive = true;
                  });
                }),

How can I disable Button(IconButton) click?

2 Answers2