Flutter Modal Bottom Sheet with Navigator does not pop as expected

Question

I a working with ModalBottomSheet and I love the package. However I am encountering an issue when trying to navigate with in a ModalBottomSheet.

Here is a ScreenVideo for a better understanding.

As you can see the View is presented as a ModalBottomSheet. But when popping it, it is not simply dismissing to the bottom but instead it is popping to some empty screen with a MaterialPage Pop animation.

I changed my code so I can push with a MaterialPageRoute-Animation inside that ModalBottomSheet. Before that everything was working as expected.

Here is my Page:

    class _AboutScreenState extends State<AboutScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: AppColors.primary,
      child: Navigator(
        onGenerateRoute: (settings) => MaterialPageRoute(
          builder: (context2) => Builder(
            builder: (context) => CupertinoPageScaffold(
                backgroundColor: AppColors.secondary,
                resizeToAvoidBottomInset: false,
                child: SafeArea(
                  child: Padding(
                    padding: EdgeInsets.all(sidePadding),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            IconButtonWithExpandedTouchTarget(
                              onTapped: () {
                                Navigator.pop(context);
                              },
                              svgPath: 'assets/icons/down.svg',
                            ),
                          ],
                        ),
                        Text(
                          'About',
                          style: AppTextStyles.montserratH2SemiBold,
                        ),

                        ...

                        RoundedCornersTextButton(
                          title: 'Impressum',
                          onTap: () {
                            Navigator.pop(context);
                          },
                          textColor: AppColors.primary,
                          backgroundColor: AppColors.secondary,
                          borderColor: AppColors.primary,
                        ),
                      ],
                    ),
                  ),
                )),
          ),
        ),
      ),
    );
  }
}

I was simply following this example. What am I missing here? With the code above I can push inside the ModalSheet as expected with a MaterialPageRoute Animation but popping the first screen brings up the issue...

Let me know if you need any more info! Any help is appreciated :)

Solution

I think you are popping with the wrong context. The example is popping with rootContext, which is from the top-most widget in the hierarchy. You are popping from with context, defined at your lowest builder in the hierarchy.

Comments

[rickimaru]

Have you tried using build's BuildContext? In the example, it uses rootContext during pop.

[Chris]

@rickimaru yes that was it! Thanks your help :)

[Chris]

thanks! I didnt see that... It is working as expected now :)

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.