How do I disable a Button in Flutter?

I'm just starting to get the hang of Flutter, but I'm having trouble figuring out how to set the enabled state of a button.

From the docs, it says to set onPressed to null to disable a button, and give it a value to enable it. This is fine if the button continues to be in the same state for the lifecycle.

onPressed

I get the impression I need to create a custom Stateful widget that will allow me to update the button's enabled state (or onPressed callback) somehow.

So my question is how would I do that? This seems like a pretty straightforward requirement, but I can't find anything in the docs on how to do it.

Thanks.

3 Answers
3

I think you may want to introduce some helper functions to build your button as well as a Stateful widget along with some property to key off of.

build

isButtonDisabled

onPressed

null

onPressed: ()

isButtonDisabled

null

setState(() => isButtonDisabled = true)

build()

null

Here's is some more context using the Flutter counter project.

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


class _MyHomePageState extends State<MyHomePage>
int _counter = 0;
bool _isButtonDisabled;

@override
void initState()
_isButtonDisabled = false;


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: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
_buildCounterButton(),
],
),
),
);


Widget _buildCounterButton()
return new RaisedButton(
child: new Text(
_isButtonDisabled ? "Hold on..." : "Increment"
),
onPressed: _isButtonDisabled ? null : _incrementCounter,
);




In this example I am using an inline ternary to conditionally set the Text and onPressed, but it may be more appropriate for you to extract this into a function (you can use this same method to change the text of the button as well):

Text

onPressed

Widget _buildCounterButton()
return new RaisedButton(
child: new Text(
_isButtonDisabled ? "Hold on..." : "Increment"
),
onPressed: _counterButtonPress(),
);


Function _counterButtonPress()
if (_isButtonDisabled)
return null;
else
return ()
// do anything else you may want to here
_incrementCounter();
;




onPressed: _isButtonDisabled ? null : () => _incrementCounter

return ()

null

The simple answer is onPressed : null gives a disabled button.

onPressed : null

According to the docs:

"If the onPressed callback is null, then the button will be disabled and by default will resemble a flat button in the disabledColor."

https://docs.flutter.io/flutter/material/RaisedButton-class.html

So, you might do something like this:

RaisedButton(
onPressed: calculateWhetherDisabledReturnsBool() ? null : () => whatToDoOnPressed,
child: Text('Button text')
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.