How to update state of a ModalBottomSheet in Flutter?

Question

This code is very simple: shows a modal bottom sheet and when the uses clicks the button, it increases the height of the sheet by 10.

But nothing happens. Actually, it only updates its size if the user "slides" the bottom sheet with it's finger (I belive that swipe causes a internal setState on the sheet).

My question is: how do I call the update state of a ModalBottomSheet?

showModalBottomSheet(     context: context,     builder: (context) {       return Container(         height: heightOfModalBottomSheet,         child: RaisedButton(              onPressed: () {               setState(() {                 heightOfModalBottomSheet += 10;               });              }),       );     }); 

Answer 1

You can use Flutter's StatefulBuilder to wrap your ModalBottomSheet as follows:

showModalBottomSheet(     context: context,     builder: (context) {       return StatefulBuilder(           builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {         return Container(           height: heightOfModalBottomSheet,           child: RaisedButton(onPressed: () {             setState(() {               heightOfModalBottomSheet += 10;             });           }),         );       }); }); 

Please note that the new setState will override your main widget setState but sure you can just rename it so you would be able to set state of your parent widget and the modal's

//This sets modal state setModalState(() {     heightOfModalBottomSheet += 10; }); //This sets parent widget state setState(() {      heightOfModalBottomSheet += 10; });