the modal dialog or sheet is not centering properly when called from within a ShellRoute in a Flutter app

[talpx0]

class NavigationDestination {
  const NavigationDestination({
    required this.route,
    required this.label, 
    required this.icon,
    this.child,
  });

  final String route;
  final String label;
  final Icon icon;
  final Widget? child;
}


const List<NavigationDestination> destinations = [
  NavigationDestination(
    label: 'Home',
    icon: Icon(Icons.home),
    route: '/',
  ),
  NavigationDestination(
    label: 'Explore',
    icon: Icon(Icons.playlist_add_check),
    route: '/explore',
  ),
  NavigationDestination(
    label: 'AI',
    icon: Icon(Icons.air),
    route: '/ai',
  ),
  NavigationDestination(
    label: 'Settings',
    icon: Icon(Icons.settings),
    route: '/settings',
  ),
  
];



const shellNavigatorKey = ValueKey('_scaffoldKey');
final rootNavigatorKey = GlobalKey<NavigatorState>();

final appRouter = GoRouter(
  initialLocation: '/',
  navigatorKey: rootNavigatorKey,
  routes: [
    ShellRoute(
      parentNavigatorKey: rootNavigatorKey,
      builder: (BuildContext context, GoRouterState state, Widget child) {
        int currentIndex = destinations.indexWhere((destination) =>
          state.fullPath!.startsWith(destination.route));
        return RootLayout(
          currentIndex: currentIndex,
          child: child,
        );
      },
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => const HomePage(),
        ),
        GoRoute(
          path: '/explore',
          builder: (context, state) => const SettingsPage(),
          
        ),
        GoRoute(
          path: '/ai',
          builder: (context, state) => const SettingsPage(),
        ),
        GoRoute(
          path: '/settings',
          builder: (context, state) => const SettingsPage(),
          routes: [
            GoRoute(
              path: 'appearance',
              builder: (context, state) => const ThemeScreen(),
            ),
          ],
        ),
      ],
    ),
    // Additional routes outside the shell can be defined here
  ],
);

I would expect the modal show as overlay and in the center of the screen , but not in the center of the child .

[huycozy]

Hi @talpx0
Could you please provide a completed and minimal reproducible code sample that doesn’t include 3rd party plugins or complex production code? Also, please provide the output of flutter doctor -v as well. Thank you!

This may be related/similar to #146772.