How to show snackBar without Scaffold

Question

I am trying to show snackbar in my app to notify User but without scaffold it shows me error. My current code is:

scaffoldKey.currentState?.showSnackBar(
    new SnackBar(
      backgroundColor: color ?? Colors.red,
      duration: Duration(milliseconds: milliseconds),
      content: Container(
        height: 50.0,
        child: Center(
          child: new Text(
            title,
            style: AppTheme.textStyle.lightText.copyWith(color: Colors.white),
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ),
  )

you probably have a parent widget that contains `Scaffold` as well. Create a `scaffoldKey` for that and pass it to your child `widget` that have to show the `Snakcbar`. Note that you can't use `Sanckbar` without `Scaffold` widget. — Mahdi Tohidloo, Jul 30 '19 at 08:25
I want to achieve it without the Scaffold. is that achievable? — Code Hunter, Jul 30 '19 at 08:26

Bugzilla · Answer 1 · 2021-11-11T23:08:15.217

68

If you have access to context, from laszlo's answer, just call

ScaffoldMessenger.of(context).showSnackBar(snackBar);

If you dont have context (eg: showing network request error), use this snippet based on answer from Miguel Ruvio

We are going to use the property scaffoldMessengerKey which allows us to show snackbars without needing context with just one GlobalKey. Also, no need to add 3rd party packages like Get.

First, create a globals.dart to store a GlobalKey

//globals.dart

import 'package:flutter/material.dart';

final GlobalKey<ScaffoldMessengerState> snackbarKey =
    GlobalKey<ScaffoldMessengerState>();

Second, add scaffoldMessengerKey property to MaterialApp

//main.dart

import 'globals.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      scaffoldMessengerKey: snackbarKey, // <= this
      ...

Finally, refer to this Key anywhere to show a Snackbar

// anywhere

import 'globals.dart';

final SnackBar snackBar = SnackBar(content: Text("your snackbar message"));
snackbarKey.currentState?.showSnackBar(snackBar);

edited Nov 11 '21 at 23:08

answered Sep 27 '21 at 10:17

Bugzilla

1,856
1
10
16

1

This should be the accepted answer in my opinion. works beautifully well if you are using Provider, MVVM architecture and for whatever reason of yours, you want to create Snackbars from within your viewModel. – Lone Wolf Oct 31 '21 at 04:02
1

I have seen many solutions with static global scaffold keys but all are not working. This answer should be the accepted answer. – Simple Code Oct 19 '22 at 20:09
1

This is definitely deserving an accepted answer. works like a charm. – shababhsiddique Mar 01 '23 at 06:20
It didn't work and it said it needed a scaffold to show the message. – Abhijit leihaorambam Apr 12 '23 at 14:21
@Abhijitleihaorambam can you share some code? – Bugzilla Apr 13 '23 at 15:03
its ok, I just call the native toast instead of doing it this way and works perfectly. – Abhijit leihaorambam Apr 13 '23 at 16:32
This should 100% be the accepted answer. – busyPixels Aug 04 '23 at 02:53

score 9 · Accepted Answer · edited Feb 10 '21 at 10:55

9

It can get the current context and show snackbar like this:

void _showToast(BuildContext context) {
  final scaffold = Scaffold.of(context);
  scaffold.showSnackBar(
    SnackBar(
      content: const Text('Updating..'),
    ),
  );
}

this._showToast(context);

edited Feb 10 '21 at 10:55

Gene

4,192
5
32
56

answered Jul 30 '19 at 08:27

Manas

3,060
4
27
55

8

You can't show snackbar without context of scaffold. – Sanjay Kumar Sep 05 '20 at 08:48
looks like it is possible, by creating a global snacker key, check bugzilla's answr – shababhsiddique Mar 01 '23 at 06:21

score 6 · Answer 3 · answered Mar 24 '20 at 01:14

No, It is not possible. Snackbar is part of Scaffold. It must have a Scaffold parent. Snackbar

Inside Scaffold parent, you can do like below

BuildContext con=context;
final snackBar = SnackBar(content: Text(message));
Scaffold.of(con).showSnackBar(snackBar);

score 4 · Answer 4 · answered Apr 16 '21 at 10:23

4

Scaffold.of(context).showSnackBar() is deprecated. You should use ScaffoldMessenger now.

Example: ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Clicked!")));

Here are listed the benefits of the new approach.

answered Apr 16 '21 at 10:23

laszlo

494
4
18

score 3 · Answer 5 · edited Oct 07 '20 at 07:03

3

Use https://pub.dev/packages/get

then you can simply call the Get.snackbar() to show the snackbar where you want it to be displayed.

Get.snackbar('Hi', 'i am a modern snackbar');

NOTE

You can use this package when you don't have the context too.

edited Oct 07 '20 at 07:03

Abel Tilahun

1,705
1
16
25

answered May 14 '20 at 03:36

saswat saubhagya

123
1
10

How to show snackBar without Scaffold

5 Answers5

Linked