onPressed not disabling the button

Question

I tried to implement the solution in this article but it's not working for me. When I click the button it should be disabled. Also, when I click the button and hot reload the app, it renders the button disabled.

I also tried using a function but I had difficulties accessing widgets variables.

bool _isButtonDisabled = false;

MaterialButton(
  color: Colors.blue,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  child: Text('Login'),
  shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(4)),
  onPressed: _isButtonDisabled ? null : () async {
    _isButtonDisabled = true;

    // Login Stuff
  }
)

score 3 · Accepted Answer · answered Jan 21 '20 at 21:56

To apply changes to the UI you need to do it inside the setState() method

    setState(() {
      _isButtonDisabled = true;
    });

complete example:


class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isButtonDisabled = false;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: Colors.blue,
      textColor: Colors.white,
      disabledColor: Colors.grey,
      disabledTextColor: Colors.black,
      child: Text('Login'),
      shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(4)),
      onPressed: _isButtonDisabled
          ? null
          : () async {
              setState(() {
                _isButtonDisabled = true;
              });

              // Login Stuff
            },
    );
  }
}

onPressed not disabling the button

1 Answers1