Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show snackbar from scaffold inside onPressed callback on Floating Action Button

Tags:

flutter

I am trying to call

Scaffold.of(context).showSnackBar(SnackBar(
  content: Text("Snack text"),
));

inside onPressed of floatingActionButton of scaffold.

I get this error

I/flutter (18613): Scaffold.of() called with a context that does not contain a Scaffold.
I/flutter (18613): No Scaffold ancestor could be found starting from the context that was passed to 
....

And it points to a solution when you call Scaffold.of(context) inside a body.

https://docs.flutter.io/flutter/material/Scaffold/of.html

But the same solution doesnt work if you call it inside onPressed of FloatingActionButton

like image 609
Tree Avatar asked May 18 '18 03:05

Tree


People also ask

How do you show SnackBar on button click in Flutter?

The ElevatedButton is a child widget placed on the return Center . Then, we use the ScaffoldMessenger class to display the SnackBar. Clicking on the button will show the SnackBar with the following message: “Hi, I am a SnackBar!”

How do you show error in SnackBar in Flutter?

We already have a SnackBar widget on Flutter to show such errors or warning messages. To display it using ScaffoldMessenger . Inside the SnackBar, the content is a simple text. If you click on the show message button.

How do I show SnackBar on top of dialog in Flutter?

Old answer. ScaffoldMessenger shows SnackBar in the nearest descendant Scaffold . If you add another Scaffold before AlertDialog , it will use it instead of the root one which is left behind the dialog.

How do you show SnackBar in Flutter without scaffolding?

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.


2 Answers

UPDATE: The second solution is better than this solution.

You should put the floatingActionButton widget in a Builder Widget. The following code should work:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new Builder(builder: (BuildContext context) {
        return new FloatingActionButton(onPressed: () {
          Scaffold
              .of(context)
              .showSnackBar(new SnackBar(content: new Text('Hello!')));
        });
      }),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new MySwitch(
              value: _switchValue,
              onChanged: (bool value) {
                if (value != _switchValue) {
                  setState(() {
                    _switchValue = value;
                  });
                }
              },
            )
          ],
        ),
      ),
    );
like image 124
Antonino Avatar answered Sep 19 '22 06:09

Antonino


Add a Globalkey of the Scaffold state and use that to display snack bar as below,

GlobalKey<ScaffoldState> scaffoldState;

Scaffold {
key: scaffoldState,
....


scaffoldState.currentState.showSnackBar(new SnackBar(content: new Text('Hello!')));
like image 38
Vinoth Kumar Avatar answered Sep 20 '22 06:09

Vinoth Kumar