title: Which context to use in flutter? What is the difference?
body: <p>I am having trouble understanding the differences between the <code>Widget BuildContext</code> and the <code>Builder BuildContext</code> as of the following code snippets:</p>
  
  <pre><code>@override
    Widget build(BuildContext context) {
  </code></pre>
  
  <p>and</p>
  
  <pre><code>new Builder(
    builder: (BuildContext context){
  </code></pre>
  
  <p>By using the <code>Widget BuildContext</code> the SnackBar doesn't appear in the UI but an error is shown in the logs which indicates that the <code>Scaffold.of() Context</code> doesn't have a Scaffold while using the <code>Builder context</code> everything worked fine.</p>
  
  <pre><code>Scaffold.of(context).showSnackBar(
    new SnackBar(content: new Text('Processing Data')));
  </code></pre>
  
  <p>Edit: The main.dart file:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(new MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'APP'),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
    @override
    _MyHomePageState createState() =&gt; new _MyHomePageState();
  }
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    final formKey = new GlobalKey&lt;FormState&gt;();
    String username;
    @override
    //This context
    Widget build(BuildContext context) {
      return new MaterialApp(
        home: new Scaffold(
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: &lt;Widget&gt;[
              new Flexible(
                child: new Container(
                  child: new Center(
                    child: new Text(widget.title),
                  ),
                ),
                flex: 1,
              ),
              new Form(
                key: formKey,
                child:
                new Row(children: &lt;Widget&gt;[
                  new Flexible(child:
                    new Container(
                      margin: EdgeInsets.zero,
                      child: new TextFormField(
                        decoration:
                        new InputDecoration(
                          hintText: 'Username',
                          labelText: "1",
                          labelStyle: new TextStyle(color: new Color.fromARGB(255, 0, 0, 0)),
                        ),
                        validator: (val) =&gt; val.isEmpty? 'Username can\'t be empty.' : null,
                        ),
                    ),
                    flex: 1,
                  ),
                  new Flexible(child:
                    new Container(
                      margin: EdgeInsets.only(
                        left: 8.0,
                        right: 8.0,
                      ),
                      child: new TextFormField(
                        decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: "Password",
  
                        ),
                        validator: (val) =&gt; val.isEmpty? 'Password can\'t be empty.' : null,
                        obscureText: true,
                      ),
                    ),
                    flex: 1,
                  ),
                  new Container(
                    child:
                    new Builder(
                      //And this context
                      builder: (BuildContext context){
                      return RaisedButton(
                        child: new Text("Sign in"),
                        onPressed: (){
                          if (formKey.currentState.validate()) {
                            // If the form is valid, display a snackbar. In the real world, you'd
                            // often want to call a server or save the information in a database
                            Scaffold.of(context).showSnackBar(
                            new SnackBar(content: new Text('Processing Data')));
                          }
                        },
                      );
                      },
                    ),
                  ),
                ],
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>