Flutter snackbar dismiss on SnackBarAction onPressed

Question

I want to dismiss SnackBar on SnackBarAction's onPressed method. I tried with Navigator.of(context).pop(); but SnackBar is not dismissing my screen get black instead.

Here is code:

 void showInSnackBar(String value) {
homeScaffoldKey.currentState.showSnackBar(new SnackBar(content: new Text(value),
  action: SnackBarAction(
    label: 'Dissmiss',
    textColor: Colors.yellow,
    onPressed: () {
    //  Navigator.of(context).pop();
    },
  ),));
}

Achintha Isuru · Answer 1 · 2021-05-06T13:13:44.460

87

You can also use,

Scaffold.of(context).hideCurrentSnackBar();

Be careful when you use context, use the correct context.

NOTE

In the new Flutter Version, this method is deprecated. Therefore use

ScaffoldMessenger.of(context).hideCurrentSnackBar();

edited May 06 '21 at 13:13

answered Sep 25 '19 at 14:50

Achintha Isuru

2,662
18
24

5

You can also use Scaffold.of(context).removeCurrentSnackBar() to dismiss the SnackBar immediately without the exit animation. – jose.angel.jimenez Jan 08 '20 at 16:12
Better use keys instead of context, – emanuel sanga Apr 05 '21 at 10:37

diegoveloper · Accepted Answer · 2023-01-05T13:21:38.460

56

Try using hideCurrentSnackBar method

onPressed: () {
    homeScaffoldKey.currentState.hideCurrentSnackBar();
},

Update

Use ScaffoldMessenger instead, heee you have the guide:

https://docs.flutter.dev/release/breaking-changes/scaffold-messenger

More info here: https://api.flutter.dev/flutter/material/ScaffoldMessengerState/hideCurrentSnackBar.html

edited Jan 05 '23 at 13:21

answered Mar 02 '19 at 05:34

diegoveloper

93,875
20
236
194

The link has died. – Pratik Butani Jan 05 '23 at 07:10

score 17 · Answer 3 · edited Feb 21 '23 at 10:59

17

ScaffoldMessenger.of(context).hideCurrentSnackBar();

edited Feb 21 '23 at 10:59

Ravindra S. Patil

11,757
3
13
40

answered Feb 02 '21 at 09:37

Rizwan Ansar

690
8
17

2

this is the latest answer for anyone new here --> since Flutter 2.0 the scaffold.snackbar is deprecated and the scaffold messenger is the new way to go – Christian X Mar 15 '21 at 08:48

score 7 · Answer 4 · answered Sep 30 '19 at 08:34

7

If you want to replace snackbar that show only one time,

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  final snackBar = SnackBar(content: Text("Hello, world"));

And also,

@override
Widget build(BuildContext context) {
return Scaffold(
  key: _scaffoldKey,

And also,

onPressed: () {
    _scaffoldKey.currentState.removeCurrentSnackBar();
    _scaffoldKey.currentState.showSnackBar(snackBar);
     }

answered Sep 30 '19 at 08:34

Hussnain Haidar

2,200
19
30

I liked this solution because it immediately removes snack bar. (I think) In my case I am not left with a queue of snack bar animations playing if a series of "showSnackBar()" calls are made. – AndrewS Jun 27 '20 at 00:15

score 7 · Answer 5 · answered Nov 12 '21 at 06:38

To clear the previous snackbars & show only the new one, use removeCurrentSnackBar method rather than hideCurrentSnackBar as it does not clear the stack. So the code will be

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

score 4 · Answer 6 · answered Jul 14 '21 at 14:24

Define your SnackBar:

var snackBar = SnackBar(content: Text('Hello World'));

To show it:

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

To hide it:

ScaffoldMessenger.of(context).hideCurrentSnackBar();

To hide the last one and show a new one:

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

score 2 · Answer 7 · answered Mar 21 '22 at 21:10

All these answers will not work because you cannot reference the ScarfoldMessenger from a Snackbar. You'll have to save a reference to the snackbar and call it's "close" method. Like so void Function () close; var snackbar = ScaffoldMessenger.of(context).showsnackbar(Snackbar (content:Text(), action: SnackbarAction(onPressed:()=>close())) close = ()=> snackbar.close();

score 1 · Answer 8 · answered Jun 29 '21 at 07:21

1

Scaffold.of(context).hideCurrentSnackBar(); Above method is used previously but,

ScaffoldMessenger.of(context).hideCurrentSnackBar(); This is now recommended.

answered Jun 29 '21 at 07:21

Rishu Roy

21
1
1

score 1 · Answer 9 · answered Jul 08 '21 at 11:43

You can also show and dismiss a snackbar like this without any key

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello from snackbar!'),
    action: SnackBarAction(
      label: 'Dissmiss',
      textColor: Colors.yellow,
      onPressed: () {
        ScaffoldMessenger.of(context).hideCurrentSnackBar();
      },
    ),
  ),
);

score 1 · Answer 10 · answered Aug 07 '22 at 09:35

As today using Flutter v3 there seems to be even a simpler solution to dismiss the Snackbar, which is shown on Flutter official cookbook, not sure if it works the same on previous versions.

It's as simple as passing an empty function to onPressed

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Close',
    onPressed: () {},
  ),
);

score 0 · Answer 11 · answered Sep 20 '22 at 15:20

IconButton(
        // 1
        icon: Icon(_isFavorited ? Icons.favorite : Icons.favorite_border),
        iconSize: 30,
        // 2
        color: Colors.red[400],
        onPressed: () {
          // 3
          setState(() {
            _isFavorited = !_isFavorited;
            if (_isFavorited) {
              final snackBar = SnackBar(
                content: const Text('Added to favorite'),
                action: SnackBarAction(
                    label: 'Ok',
                    onPressed: () {
                      ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    }),
              );
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            } else {
              final snackBar = SnackBar(
                content: const Text('removed from Favorite'),
                action: SnackBarAction(
                    label: 'Ok',
                    onPressed: () {
                      ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    }),
              );
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            }
          });
        },
      )

Flutter snackbar dismiss on SnackBarAction onPressed

11 Answers11