Flutter onClosing callback for showModalBottomSheet

Question

I have a showModalBottomSheet like the below, which I understand to inherit from BottomSheet (right?)

      showModalBottomSheet

        

Answer 1

Using async / await on showModalBottomSheet() close

You can do this with async / await instead of callbacks.

As per the documentation, showModalBottomSheet()

Returns a Future that resolves to the value (if any) that was passed to Navigator.pop when the modal bottom sheet was closed.

This means that we can "await" the showModelBottomSheet() to complete, and then use the value returned by the Navigator.pop() function used to close the sheet.

Because this is "waiting" for the sheet to be closed, your next function won't run until it's closed. In this example, we just call the print() function, but that could be any function you need. No callbacks are necessary in this case.

Tip: if it's critical that the user tap a "save and close" button to close the bottom sheet (instead of just tapping outside of it), you should use isDismissibile: false on the sheet.

In this example, we expect the sheet to return a string when it's closed.

Example Button To Open The showModalBottomSheet()

  FlatButton(
    child: Text("Show Bottom Sheet"),
    onPressed: () async {
      print("Showing bottom sheet...");
      String test = await showModalBottomSheet(
        context: context,
        isDismissible: false,
        builder: (context) => Widget(),
      );
      print("Modal sheet closed with value: " + test);
    },
  ),

Example Button To Close The sheet, inside Widget()

FlatButton(
  child: Text("Save and Close"),
  onPressed: () {
    print("Closing sheet.");
    Navigator.pop(context, "This string will be passed back to the parent",);
  },
),

Example Log Outputs

flutter: Showing bottom sheet...
flutter: Closing sheet.
flutter: Modal sheet closed with value: This string will be passed back to the parent