Scaffold.of() called with a context that does not contain a Scaffold. problem

Question

i try to create a snackbar on scaffold, but error was Scaffold.of() called with a context that does not contain a Scaffold. and i can't solve it,i try to put a key but there is an error on it and can't setup an key, this is my code:



class Login extends StatelessWidget {

  
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text('Log in',
              style: TextStyle(color: Colors.black),
              textAlign: TextAlign.center),
        ),
        
                    SizedBox(
                        width: 500,
                        height: 50.0,
                        child: RaisedButton(
                            textColor: Colors.white,
                            color: Colors.blue,
                            child: Text('Log In'),
                            onPressed: () => {
                             Scaffold.of(context).showSnackBar(SnackBar(content: Text('Done!'),))
                            }))
                  ])
                ],
              ),
            ),
          ),
        ));
  }
}

Does this answer your question ? https://stackoverflow.com/questions/51304568/scaffold-of-called-with-a-context-that-does-not-contain-a-scaffold/51304732 — void, Aug 11 '20 at 17:02

score 2 · Accepted Answer · answered Aug 11 '20 at 17:10

This problem can be fixed by adding a widget around the RaisedButton called Builder. This causes there to be a new context which fixes the problem because you are using the context of the widget that instantiated Scaffold not the context of a child of Scaffold. Hopefully this helps, I have included an updated code segment below to help!

class Login extends StatelessWidget {

  
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text('Log in',
              style: TextStyle(color: Colors.black),
              textAlign: TextAlign.center),
        ),
        
                    SizedBox(
                        width: 500,
                        height: 50.0,
                        child: Builder(
                           builder: (context) {
                             return RaisedButton(
                               textColor: Colors.white,
                               color: Colors.blue,
                               child: Text('Log In'),
                               onPressed: () => {
                                Scaffold.of(context).showSnackBar(SnackBar(content: Text('Done!'),))
                                })
                             }
                        )
                   )
                  ])
                ],
              ),
            ),
          ),
        ));
  }
}

can i create an method to call it in different places to show snackbar? — AhdOthman, Aug 11 '20 at 17:25
You can make the part that is called when pressed into a method or you could make a new class with the builder widget to be able to call that whenever you want! — Dbono.dev, Aug 12 '20 at 19:19

Scaffold.of() called with a context that does not contain a Scaffold. problem

1 Answers1