How to Disable Button In Flutter ?

FlatButton Widget basically used to show buttons that lead to secondary functionalities of the application like viewing files from the Gallery, navigate to other screens, etc. OutlineButton Widget is used for more emphasis than text buttons due to the stroke. Sometimes user requires to disable the button once the operation is being performed. So this is the time to discuss How to Disable Button In Flutter?

Know How to Disable Button In Flutter?

Use a StatefulWidget/State and create a variable to hold your condition (e.g. isButtonDisabled)
Set this to true initially (if that’s what you desire)
When rendering the button, don’t directly set the onPressed value to either null or some function onPressed: () {}
Instead, conditionally set it using ternary or a helper function.
Check the isButtonDisabled as part of this conditional and return either null or some function.
When the button is pressed (or whenever you want to disable the button) use setState(() => isButtonDisabled = true) to flip the conditional variable.
When the button is pressed (or whenever you want to disable the button) use setState(() => isButtonDisabled = true) to flip the conditional variable.
Flutter will call the build() method again with the new state and the button will be rendered with a null press handler and be disabled.

Consider a code snippet like the below:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;
  late bool isButtonDisabled;

  @override
  void initState() {
    isButtonDisabled = false;
    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      isButtonDisabled = true;
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("The App"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
            ),
            _buildCounterButton(),
            
          ],
        ),
      ),
    );
  }

  Widget _buildCounterButton() {
    return new ElevatedButton(
      child: new Text(
        isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: isButtonDisabled ? null : _incrementCounter,
    );
  }
}

For a specific and limited number of widgets, wrapping them in a widget IgnorePointer does exactly this: when its ignoring property is set to true, the sub-widget actually, the entire subtree is not clickable.

IgnorePointer(
    ignoring: true, // or false
    child: ElevatedButton(
        onPressed: (){},
        child: Text("Facebook sign-in"),
        ),
),

Enable and Disable functionality is the same for most of the widgets.

onPressed : null returns Disabled Widget

onPressed : (){} or onPressed : _functionName returns Enabled Widget

You can also use AbsorbPointer, and you can use it in the following way:

AbsorbPointer(
      absorbing: true, // by default is true
      child: ElevatedButton(
        onPressed: (){
          print('pending to implement onPressed function');
        },
        child: Text("Button Click!!!"),
      ),
    ),

The easiest way can be as below:

ElevatedButton(
  child: Text("PRESS BUTTON"),
  onPressed:(){}, 
),

Conclusion:

In this article, We have been through How to Disable Button In Flutter?

Keep Learning!!! Keep Fluttering !!!

Still, need a Support for Flutter Development? Do let us know.

A leading Flutter mobile app development company Flutter Agency, is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.