Flutter - How to take an action when the bottom modal sheet is dismissed?

user_18349414 0
Viewed 816

I have a filters button. It's a container with a border, and inside are two icons in a row. All of this is wrapped in a gesture detector.

When the user taps the gesture detector, I am showing a bottom modal sheet. This all works. However, I want one of the icons to change depending on whether the user has the bottom modal sheet activated or not. How can I achieve this?

I think I can call setState once the button is tapped, BEFORE showing the modal bottom sheet. How can call setState again when the user taps out of it?

Thanks!

Is there an option to configure this in the showModalBottomSheet constructor?

dart flutter
2 Answers

As you did not post any code I'm guessing that you are using the method showModalBottomSheet.

This method has the following prototype:

Future<T?> showModalBottomSheet<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  Color? backgroundColor,
  double? elevation,
  ShapeBorder? shape,
  Clip? clipBehavior,
  BoxConstraints? constraints,
  Color? barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
  RouteSettings? routeSettings,
  AnimationController? transitionAnimationController,
})

source

As you can see it returns a Future<T?> type which means that you can apply await, then or whenComplete to the returned future operation. In your case using whenComplete might be the better option if you don't need any value from the bottom sheet.

Example

showModalBottomSheet<void>(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      color: Colors.amber,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text('Modal BottomSheet'),
            ElevatedButton(
              child: const Text('Close BottomSheet'),
              onPressed: () => Navigator.pop(context),
            )
          ],
        ),
      ),
    );
  },
).whenComplete(_onBottomSheetClosed);

void _onBottomSheetClosed() {
  print("Closed bottomsheet");
}

Try the full example on DartPad

user_99423460

I was searching how to dismiss bottom sheet after navigation through it to a second screen , I found out that bottom sheet gets also added to navigation stack so , just use pushReplacement:

Navigator.pushReplacement( context,PageTransition(type: PageTransitionType.leftToRight, child: Page()));

hope this help someone.

user_154286220
Related