Question 192455 in Flutter Question posted in
The official Flutter documentation can be found here.

How to open dialog above all screens in flutter, when using go_router?

    final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocProvider<InactivityCubit>(
      create: (_) => inject<InactivityCubit>(),
      child: MaterialApp.router(
        builder: (context, widget) {
          return Container(
            child: BlocListener<InactivityCubit, InactivityState>(
              listener: (context, state) => state.whenOrNull(
                showDialog: () {
                  final currentContext = navigatorKey.currentContext!;
                  AmazingDialog.show(currentContext!);
                  return null;
                },
              ),
              child: widget,
            ),
          );
        },
        theme: appTheme,
        routerConfig: inject<GoRouter>(),
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        supportedLocales: AppLocalizations.supportedLocales,
      ),
    );
  }
}

How to open dialog above all screens in flutter, when using go_router? In my code I have an error because navigatorKey.currentContext is null.

Tags:

2

Answers


  1. 0 
    @override 
Widget build(BuildContext context) {

    Can you try using context of build method?
    Not sure if we can get context from go_router.

    Login or Signup to reply.
  2. 0

    To open a dialog above all screens in Flutter using the provided code snippet, you can use the showDialog function along with the navigatorKey to ensure the dialog is displayed on top of all screens. :

    final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider<InactivityCubit>(
      create: (_) => inject<InactivityCubit>(),
      child: MaterialApp.router(
        navigatorKey: navigatorKey, // Set the navigatorKey
        builder: (context, widget) {
          return Container(
            child: BlocListener<InactivityCubit, InactivityState>(
              listener: (context, state) => state.whenOrNull(
                showDialog: () {
                  // Use navigatorKey to access the navigator
                  final currentContext = navigatorKey.currentContext!;
                  showDialog(
                    context: currentContext,
                    builder: (BuildContext context) {
                      return AmazingDialog(); // Replace with your dialog widget
                    },
                  );
                },
              ),
              child: widget,
            ),
          );
        },
        theme: appTheme,
        routerConfig: inject<GoRouter>(),
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        supportedLocales: AppLocalizations.supportedLocales,
      ),
    );
  }
}

    In this code, the navigatorKey is set on the MaterialApp.router widget using the navigatorKey property. Then, within the BlocListener, when the showDialog state is triggered, showDialog is called with the currentContext obtained from navigatorKey.currentContext.

    With these changes, the dialog will be displayed on top of all screens.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search