Flutter Modal Bottom Sheet with Navigator does not pop as expected

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.