Reputation: 2117
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
}
)
Upvotes: 1
Views: 155
Reputation: 2142
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
},
);
}
}
Upvotes: 3