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

Flutter: Two keys in Scaffold

In this Flutter code showSnackBar() doesn’t work. I don’t know how to use the two keys (_scaffoldStateKey and _scaffoldMessengerKey) at the same time. How should I correct it?

class _GetStateObjectRouteState extends State<GetStateObjectRoute> {

  final GlobalKey<ScaffoldState> _scaffoldStateKey= GlobalKey();
  final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldStateKey,
      appBar: AppBar(
        title: const Text("A test app"),
      ),
      body: Center(
        child: Column(
          children: [
            Builder(
              builder: (context) {
                return ElevatedButton(
                  onPressed: () {
                     _scaffoldStateKey.currentState?.openDrawer();
                  },
                  child: const Text("Open drawer 1"),
                );
              },
            ),
            Builder(builder: (context) {
              return ElevatedButton(
                onPressed: () {
                  _scaffoldStateKey.currentState?.openDrawer();
                },
                child: const Text("Open drawer 2"),
              );
            }),
            Builder(
              builder: (context) {
                return ElevatedButton(
                  onPressed: () {     //doesn't work
                    _scaffoldMessengerKey.currentState?.showSnackBar(
                      const SnackBar(
                          content: Text("Here is a snackbar")),
                    );
                  },
                  child: const Text("Show snackbar"),
                );
              },
            ),
          ],
        ),
      ),
      drawer: const Drawer(),
    );
  }
}
Tags:

3

Answers


  1. 0

    Try this!
    You can show snackbar without using _scaffoldMessengerKey key.

      ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text("Here is a snackbar")),
  );

    Happy coding🧑‍💻.

    Login or Signup to reply.
  2. 0 
    class _GetStateObjectRouteState extends State<GetStateObjectRoute> {
  final GlobalKey<ScaffoldState> _scaffoldStateKey = GlobalKey();
  final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: _scaffoldMessengerKey,
      child: Scaffold(
        key: _scaffoldStateKey,
        appBar: AppBar(
          title: const Text("A test app"),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () {
                  _scaffoldStateKey.currentState?.openDrawer();
                },
                child: const Text("Open drawer 1"),
              ),
              ElevatedButton(
                onPressed: () {
                  _scaffoldStateKey.currentState?.openDrawer();
                },
                child: const Text("Open drawer 2"),
              ),
              ElevatedButton(
                onPressed: () {
                  _scaffoldMessengerKey.currentState?.showSnackBar(
                    const SnackBar(content: Text("Here is a snackbar")),
                  );
                },
                child: const Text("Show snackbar"),
              ),
            ],
          ),
        ),
        drawer: const Drawer(),
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    You don’t need to pass any key to show the snack bar in Flutter. Just use the below code –

    const snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
);

// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);

    For more details https://docs.flutter.dev/cookbook/design/snackbars

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

Back To Top
Search