Flutter showModalBottomSheet update parent without Navigator.pop()

Question

In my app I would like to show a bottom sheet with showModalBottomSheet to let the user pick a font. When a new font is selected I would like to reflect the changes immediately in the parent view that is presenting the sheet without closing the sheet.

With Navigator.pop(context, value); I can easily send data back to the parent but I don't wanna close the bottom sheet on every selection.

Is there any way to achieve this behavior?

enter image description here

This it my current code to show and hide the picker modal:

In the parent view.

void showFontPicker() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        isDismissible: true,
        builder: (context) => FontPickerSheet()).then((value) {
      setState(() {
        widget.myPostcard.font = value;
      });
    });
}

In the FontPickerSheet Widget:

CupertinoPicker(
    itemExtent: 30,
    onSelectedItemChanged: (int value) {
       Navigator.pop(context, value);
    },
…

There are several ways, via a callback and a setState for example, or using a state manager like riverpod. Look at this example https://medium.com/@avnishnishad/flutter-working-with-callbacks-1d5e5f5d9c5a or riverpod https://riverpod.dev/ — Pierre Bouttier, Jan 21 '23 at 15:34

score 1 · Accepted Answer · answered Jan 21 '23 at 16:00

You can pass a function to update the main state as parameter as follow:

Parent view

void showFontPicker() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        isDismissible: true,
        builder: (context) => FontPickerSheet(onSelected: updateMainView )).then((value) {
      setState(() {
        widget.myPostcard.font = value;
      });
    });
  }

  void updateMainView(value)
  {
    setState(() {
      widget.myPostcard.font = value
    });
  }

FontPickerSheet Widget

CupertinoPicker(
    itemExtent: 30,
    onSelectedItemChanged: (int value) {
       onSelected(value); // or widget.onSelected(value); [it depends on how you passed this value]
    },
…

Flutter showModalBottomSheet update parent without Navigator.pop()

1 Answers1