未处理的异常：使用不包含 Scaffold 的上下文调用 Scaffold.of()

Question

I am trying to show snackbar on button click but due to some reasons facing an error message below.

Unhandled Exception: Scaffold.of() called with a context that does not contain a Scaffold.

Am I missing anything?

Code

class SignIn extends StatefulWidget {
  @override
  _SignInState createState() {
    return _SignInState();
  }
}

class _SignInState extends State<SignIn> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Hello",
        home: Scaffold(
            body: Center(
                child: ListView(shrinkWrap: true, children: <Widget>[
              Center(
                  child: Form(
                key: _formKey,
                child: Column(children: <Widget>[                 
                  Container(
                    child: Column(
                      children: <Widget>[                        
                        Container(
                          child: Row(
                            children: <Widget>[
                              ElevatedButton(
                                  child: Text("Login"),
                                  onPressed: () {
                                    Scaffold.of(context).showSnackBar(
                                            SnackBar(
                                              content: Text("Hello there!"),
                                            ),
                                          );
                                  })
                            ],
                          ),
                        )
                      ],
                    ),
                  )
                ]),
              ))
            ]))));
  }
}

Answer 1

Use Scaffold key for showing snackbar.

class SignIn extends StatefulWidget {
  @override
  _SignInState createState() {
    return _SignInState();
  }
}

class _SignInState extends State<SignIn> {
  final _formKey = GlobalKey<FormState>();
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        key: _scaffoldKey,
        body: Center(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              Center(
                child: Form(
                  key: _formKey,
                  child: Column(children: <Widget>[
                    Container(
                      child: Column(
                        children: <Widget>[
                          Container(
                            child: Row(
                              children: <Widget>[
                                ElevatedButton(
                                    child: Text("Login"),
                                    onPressed: () async {
                                      _scaffoldKey.currentState.showSnackBar(
                                        SnackBar(
                                          content: Text("Hello there!"),
                                        ),
                                      );
                                    })
                              ],
                            ),
                          )
                        ],
                      ),
                    )
                  ]),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

Try

Material App (home: NewWidget())

In which the

NewWidget();

is a stateless or stateful widget that returns Scaffold

Create a new widget and paste all the code from Scaffold. Then return the widget at home: