Exception with Navigator.pop(context) on drawer

Question

I started using Flutter yesterday because it looks amazing. But now i've got an exception that stumped me. When i click the items in the Drawer i want the drawer to close. But when i click them i get an exception. Underneath is my code and the exception. I hope someone can help me with this issue and explain to me why it doesn't work to further extend my knowledge of the framework.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        Column buildButtonColumn(IconData icon, String label) {
            Color color = Theme.of(context).primaryColor;

            return new Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    new Icon(icon, color: color),
                    new Container(
                        margin: const EdgeInsets.only(top: 8.0),
                        child: new Text(
                            label,
                            style: new TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.w400,
                                color: color,
                            ),
                        ),
                    ),
                ],
            );
        }
        Widget titleSection = new Container(
            padding: const EdgeInsets.all(32.0),
            child: new Row(
                children: [
                    new Expanded(
                        child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                                new Container(
                                    padding: const EdgeInsets.only(bottom: 8.0),
                                    child: new Text(
                                        'Oeschinen Lake Campground',
                                        style: new TextStyle(
                                            fontWeight: FontWeight.bold
                                        ),
                                    ),
                                ),
                                new Text(
                                    'Kandersteg, Switzerland',
                                    style: new TextStyle(
                                        color: Colors.grey[500],
                                    ),
                                ),
                            ],
                        ),
                    ),
                    new Icon(
                        Icons.star,
                        color: Colors.red[500],
                    ),
                    new Text('41'),
                ],
            ),
        );
        Widget buttonSection = new Container(
            child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    buildButtonColumn(Icons.call, 'CALL'),
                    buildButtonColumn(Icons.near_me, 'ROUTE'),
                    buildButtonColumn(Icons.share, 'SHARE'),
                ],
            ),
        );
        Widget textSection = new Container(
            padding: const EdgeInsets.all(32.0),
            child: new Text(
                'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.',
                softWrap: true,
            ),
        );

        Widget drawer = new Drawer(
            child: new ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                    new DrawerHeader(
                        child: new Text('Drawer Header'),
                        decoration: new BoxDecoration(
                            color: Colors.blue,
                        ),
                    ),
                    new ListTile(
                        title: new Text('Item 1'),
                        onTap: () {
                            Navigator.pop(context);
                        },
                    ),
                    new ListTile(
                        title: new Text('Item 2'),
                        onTap: () {
                            Navigator.pop(context);
                        },
                    ),
                ],
            ),
        );

        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.red,
            ),
            home: new Scaffold(
                appBar: new AppBar(
                    title: new Text('Top Lakes'),
                ),
                drawer: drawer,
                body: new ListView(
                    children: [
                        new Image.asset(
                            'images/lake.jpg',
                            height: 240.0,
                            fit: BoxFit.cover,
                        ),
                        titleSection,
                        buttonSection,
                        textSection,
                    ],
                ),
            ),
        );
    }
}

I/flutter (12997): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (12997): The following assertion was thrown while handling a gesture:
I/flutter (12997): Navigator operation requested with a context that does not include a Navigator.
I/flutter (12997): The context used to push or pop routes from the Navigator must be that of a widget that is a
I/flutter (12997): descendant of a Navigator widget.

Answer 1

In Flutter the routes are managed by Navigator widget. Although you can create a Navigator directly it is common to use MaterialApp or WidgetApp as root.

try extending the MyApp with WidgetApp or wrap the MyApp with MaterialApp root.

Example:

void main() =>  runApp(new MaterialApp(home: new MyApp(),));

Answer 2

The answer is simpler than that: You need to assign a key to any widget you want to call a context from

So instead of calling:

Scaffold.of(context).showSnack....

You should be calling:

scaffoldKey.currentState.showSnack...

To do that, you create the scaffold key like:

final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

Then you assign that key to your scaffold like:

Widget build(BuildContext context) { return new Scaffold( key: scaffoldKey,