Cupertino modal bottom sheet not showing properly when using useRootNavigator

[fbarsotti]

I have a flutter app (cupertino styled) with a CupertinoTabBar for navigation. On the HomePage, I have a button to go to the settings (where I use MaterialWithModalsPageRoute to navigate, in order to get the animation). When I press the button on the new page to show the popup, it shows correctly (cupertino styled) but UNDER the CupertinoTabBar. Since i dont want this behaviour, I set useRootNavigator = true: but if I do so I don't get the effect I want.

Here i have two screenshots of what I'm talking about: 1) The first screenshot shows the first error: I get the correct backdrop effect in iOS style, but the popup is under my tabBar

2) In the second screenshot I'm able to hide the tabBar with useRootNavigator = true, but i lose the effect i hade before.

In my HomePage i have a button like this one:

CupertinoButton(
  child: Icon(
    CupertinoIcons.settings,
  ),
  onPressed: () => Navigator.of(context).push(
    MaterialWithModalsPageRoute(
      builder: (context) => SettingsPage(),
    ),
  ),
),

In my SettingsPage, a CupertinoListTile that invokes the popup:

onTap: () => showCupertinoModalBottomSheet(
  context: context,
    builder: (context) => SettingsLanguage(),
),

In simple words, I want the backdrop effect I have on screenshot 1) OVER the tabBar like in screenshot 2). I tried a few things, but I don't seem to find a solution mentioned in the documentation. What am I missing?

[mosabalrsaheed]

Hi @fbarsotti, did you manage to find a solution? I am facing a similar issue.

[fbarsotti]

Hello @mosabalrsaheed, sadly I couldn't get anywhere, so I left the problem behind hoping for a bug fix or a solution/workaround. I still don't know how to fix this.

[mosabalrsaheed]

Hi @fbarsotti. my issue turned out to be related to how I was pushing my page, I am using autoroute package. Using CupertinoScaffold.showCupertinoModalBottomSheet and pushing the previous page as a route(was being pushed as a widget)