Reputation: 12612

Flutter snackbar dismiss on SnackBarAction onPressed

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();
    },
  ),));
}

Upvotes: 56

Answers (13)

Mohammad Bilal Akbar

Reputation: 169

hideCurrentSnackBar() hides current snackBar, shows the next, and then shows the hidden snack bars in the end.

ScaffoldMessenger.of(context).hideCurrentSnackBar();

removeCurrentSnackBar() removes current snackBar and shows the next, but it does not show the removed snack bars.

ScaffoldMessenger.of(context).removeCurrentSnackBar();

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

Upvotes: 0

Linh

Reputation: 61039

// dismiss with animation
ScaffoldMessenger.of(context).hideCurrentSnackBar();

// dismiss without animation
ScaffoldMessenger.of(context).removeCurrentSnackBar();

// remove all snackbars currently in queue, dismiss current snackbar with animation
ScaffoldMessenger.of(context).clearSnackBars();

Upvotes: 1

Rizwan Ansar

Reputation: 710

ScaffoldMessenger.of(context).hideCurrentSnackBar();

Upvotes: 17

diegoveloper

Reputation: 103561

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

Upvotes: 56

TAYAB FAROOQ

Reputation: 31

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);
            }
          });
        },
      )

Upvotes: 0

Alex Sánchez

Reputation: 940

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: () {},
  ),
);

Upvotes: 1

Seth Samuel

Reputation: 355

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();

Upvotes: 2

Kamlendra Pandey

Reputation: 366

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);

Upvotes: 8

CopsOnRoad

Reputation: 268544

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);

Upvotes: 4

Swaroop Maddu

Reputation: 4894

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();
      },
    ),
  ),
);

Upvotes: 1

Rishu Roy

Reputation: 21

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

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

Upvotes: 1

Achintha Isuru

Reputation: 3347

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();

Upvotes: 98

Hussnain Haidar

Reputation: 2258

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);
     }

Upvotes: 7

Flutter snackbar dismiss on SnackBarAction onPressed

Answers (13)

Related Questions