How to update state of a ModalBottomSheet in Flutter?

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;
});

Leave a Comment