Show Snackbar only in single Navigator

Question

I am working on the iPad and I have set up the screen to be SplitScreens. Thus I have two Navigators side by side. However, when I call to show a Snackbar in one navigator with it's specific context, the Snackbar is still showing on both navigators.

GlobalKey<NavigatorState> secondSplitNavigatorKey = GlobalKey<NavigatorState>();
GlobalKey<NavigatorState> firstSplitNavigatorKey = GlobalKey<NavigatorState>();

SplitView(
      menu: Navigator(
        key: firstSplitNavigatorKey,
        onGenerateRoute: (routeSettings) {
          return MaterialPageRoute(
            builder: (context) =>
                const KursplanungScreen(title: 'Demo App'),
          );
        },
      ),
      content: Navigator(
        key: secondSplitNavigatorKey,
        onGenerateRoute: (routeSettings) {
          return MaterialPageRoute(
            builder: (context) => const Scaffold(
                body: Center(
                    child: Text(
                        "Herzlich Willkommen!"))),
          );
        },
      ),
      menuWidth: 300,
    ),

Later I call this in the second navigator:

ElevatedButton(
                onPressed: () {
                  showSnackbar(
                      secondSplitNavigatorKey.currentState!.context,
                      "Bitte tragen Sie einen Fachnamen ein!");
                },
                child: const Icon(
                  Icons.add,
                ),
              ),

but the result is this:

I only want the Snackbar to be showing in the second Navigator/Screen only!

I've build the SplitView manually. Just one Row with two navigators @eamirho3ein — SwiftiSwift, Sep 03 '22 at 06:04
ElevatedButton is in which screen? menu? content? or in parent widget? — eamirho3ein, Sep 03 '22 at 06:34

eamirho3ein · Accepted Answer · 2022-09-03T07:02:43.383

If you want to show snack bar in one screen(I assume in KursplanungScreen), You can wrap your KursplanungScreen's Scaffold whit ScaffoldMessenger and pass it global key and use that to show snack bar like this:

class KursplanungScreen extends StatelessWidget {
  KursplanungScreen({Key? key, required this.title}) : super(key: key);
  final String title;
  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
      new GlobalKey<ScaffoldMessengerState>();
  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: _scaffoldKey,
      child: Scaffold(
        body: Container(
          child: Center(
            child: ElevatedButton(
              onPressed: () {
                var snackBar = SnackBar(content: Text('Hello World'));
                _scaffoldKey.currentState?.showSnackBar(snackBar);
                
              },
              child: const Icon(
                Icons.add,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

SplitView class:

class SplitView extends StatelessWidget {
  const SplitView(
      {Key? key,
      required this.menu,
      required this.content,
      required this.menuWidth})
      : super(key: key);
  final Navigator menu;
  final Navigator content;
  final double menuWidth;
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(width: menuWidth, child: menu),
        Expanded(child: content)
      ],
    );
  }
}

and use it like this:

SplitView(
          menu: Navigator(
            key: firstSplitNavigatorKey,
            onGenerateRoute: (routeSettings) {
              return MaterialPageRoute(
                builder: (context) => KursplanungScreen(title: 'Demo App'),
              );
            },
          ),
          content: Navigator(
            key: secondSplitNavigatorKey,
            onGenerateRoute: (routeSettings) {
              return MaterialPageRoute(
                builder: (context) => const Scaffold(
                    body: Center(child: Text("Herzlich Willkommen!"))),
              );
            },
          ),
          menuWidth: 300,
        )

It works thank you! I wonder why it doesn't work when using the `secondSplitNavigatorKey.currentState!.context`. Maybe you can explain it further. — SwiftiSwift, Sep 03 '22 at 11:16
When you want to show snackbar in specific scaffold, you need to use ScaffoldMessenger, generally use context to show snack bar would show it in every scaffold available in that context. — eamirho3ein, Sep 03 '22 at 11:21
Aha okay. But why is the context of the right side the same as the left side thus it shows on both sides because the Navigators are seperate — SwiftiSwift, Sep 03 '22 at 11:40
it does not matter, flutter take that context to reach the scaffold so your context is represent every thing in your widget tree, so it reach to two scaffold and show message to both of them. But by using ScaffoldMessenger and ScaffoldMessenger's key you say flutter that want show my message just in this specific scaffold. — eamirho3ein, Sep 03 '22 at 11:46

Show Snackbar only in single Navigator

1 Answers1