抽屉上的 Navigator.pop(context) 异常

Question

我昨天开始使用 Flutter，因为它看起来很棒。但现在我有一个让我难过的例外。当我单击抽屉中的项目时，我希望抽屉关闭。但是当我点击它们时，我得到了一个例外。下面是我的代码和异常。我希望有人可以帮助我解决这个问题并向我解释为什么它不能进一步扩展我对框架的了解。

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

在 Flutter 中，路由由 Navigator 小部件管理。虽然您可以直接创建 Navigator，但通常使用 MaterialApp 或 WidgetApp 作为 root。

尝试使用 WidgetApp 扩展 MyApp 或使用 MaterialApp 根包装 MyApp。

例子：

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

Answer 2

答案比这更简单：您需要为要从中调用上下文的任何小部件分配一个键

所以不要调用：

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

你应该打电话给：

scaffoldKey.currentState.showSnack...

为此，您创建脚手架键，如下所示：

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

然后您将该键分配给您的脚手架，例如：

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