How do I disable a Button in Flutter

Question

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

User · Answer

For disabling any Button in flutter such as FlatButton  RaisedButton  MaterialButton  IconButton etc all you need to do is to set the onPressed and onLongPress properties to null  Below is some simple examples for some of the buttons  FlatButton  Enabled  FlatButton    onPressed           onLongPress  null     Set one as NOT null is enough to enable the button   textColor  Colors black    disabledColor  Colors orange    disabledTextColor  Colors white    child  Text  Flat Button           FlatButton  Disabled  FlatButton    onPressed  null    onLongPress  null    textColor  Colors black    disabledColor  Colors orange    disabledTextColor  Colors white    child  Text  Flat Button         RaisedButton  Enabled  RaisedButton    onPressed          onLongPress  null     Set one as NOT null is enough to enable the button      For when the button is enabled   color  Colors lightBlueAccent    textColor  Colors black    splashColor  Colors blue    elevation  8 0        For when the button is disabled   disabledTextColor  Colors white    disabledColor  Colors orange    disabledElevation  0 0     child  Text  Raised Button         RaisedButton  Disabled  RaisedButton    onPressed  null    onLongPress  null       For when the button is enabled   color  Colors lightBlueAccent    textColor  Colors black    splashColor  Colors blue    elevation  8 0        For when the button is disabled   disabledTextColor  Colors white    disabledColor  Colors orange    disabledElevation  0 0     child  Text  Raised Button         IconButton  Enabled  IconButton    onPressed           icon  Icon Icons card giftcard rounded     color  Colors lightBlueAccent                 disabledColor  Colors orange         IconButton  Disabled  IconButton    onPressed  null    icon  Icon Icons card giftcard rounded     color  Colors lightBlueAccent                 disabledColor  Colors orange       Note  Some of buttons such as IconButton have only the onPressed property

User · Answer

The simple answer is onPressed   null gives a disabled button

User · Answer

You can set also blank condition  in place of set null          var isDisable true                  RaisedButton                padding  const EdgeInsets all 20                 textColor  Colors white                color  Colors green                onPressed   isDisable                          gt         myClickingData                  child  Text  Button

User · Answer

Enable and Disable functionality is same for most of the widgets   Ex  button   switch  checkbox etc   Just set the onPressed property as shown below   onPressed   null returns Disabled widget  onPressed        or onPressed    functionName returns Enabled widget

User · Answer

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        gt  whatToDoOnPressed        child  Text  Button text

User · Answer

I like to use flutter mobx for this and work on the state  Next I use an observer  Container child  Observer builder          var method    if   controller isDisabledButton  method   controller methodController    return RaiseButton child  Text  Test   onPressed  method         On the Controller   observable bool isDisabledButton   true   Then inside the control you can manipulate this variable as you want  Refs   Flutter mobx

User · Answer

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    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 a ternary or a helper function  example below  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      gt  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    Here s is some more context using the Flutter counter project   class MyHomePage extends StatefulWidget      override    MyHomePageState createState     gt  new  MyHomePageState       class  MyHomePageState extends State lt MyHomePage gt      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   lt Widget gt               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    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

User · Answer

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  RaisedButton          onPressed   logInWithFacebook          child  Text  Facebook sign-in                    Otherwise  if you intend to disable an entire subtree  look into AbsorbPointer

User · Answer

You can also use the AbsorbPointer  and you can use it in the following way   AbsorbPointer        absorbing  true     by default is true       child  RaisedButton          onPressed                print  pending to implement onPressed function                       child  Text  Button Click                         If you want to know more about this widget  you can check the following link Flutter Docs

User · Answer

Setting   onPressed  null    disables click   and   onPressed       gt  yourFunction      enables click

User · Answer

This is the easiest way in my opinion   RaisedButton    child  Text  PRESS BUTTON      onPressed  booleanCondition            gt  myTapCallback         null

[button] How do I disable a Button in Flutter?

Examples related to button

Examples related to dart

Examples related to flutter