如何修复颤振异常：使用不包含导航器的上下文请求导航器操作答案

【问题标题】：how to fix flutter exception : Navigator operation requested with a context that does not include a Navigator如何修复颤振异常：使用不包含导航器的上下文请求导航器操作
【发布时间】：2018-07-30 18:47:48
【问题描述】：

我正在尝试使用颤振框架创建抽屉导航，但每次运行时都会出现以下异常

另一个异常被抛出：导航器操作请求不包含导航器的上下文。

那么解决办法是什么，有什么帮助吗？

我使用 Navigator 类如下

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new AppStates();
  }
}

class AppStates extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Application App Bar"),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text("Next Page"),
                onTap: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => NextPage()));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

NextPage类的代码是

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Next Page App Bar"),
        ),
      ),
    );
  }
}

【问题讨论】：

看看这个，这是你面临的吗？ github.com/flutter/flutter/issues/15919
你解决了吗？

标签： android flutter

【解决方案1】：

您似乎没有针对当前上下文的导航器设置。您应该尝试将 MaterialApp 作为您的根应用程序，而不是使用 StatefulWidget。 MaterialApp 为您管理一个导航器。这是一个如何在 main.dart 中设置应用程序的示例

void main() {
 runApp(MaterialApp(
   title: 'Navigation Basics',
   home: MyApp(),
 ));
}

【讨论】：

【解决方案2】：

这是因为您使用的 context 是在实际创建 Navigator 之前的应用级别。这是在 Flutter 中创建“简单”单文件应用时的常见问题。

有许多可能的解决方案。一种是将您的Drawer 提取到它自己的类中（相应地扩展Stateless/StatefulWidget），然后在它的build 覆盖中，父Scaffold 将已经创建，其中包含一个Navigator 供您使用。

class MyDrawer extend StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          ListTile(
            title: Text("Next Page"),
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => NextPage()));
            },
          )
        ],
      ),
    );
  }

另外，如果你想把这个Drawer 保留在同一个文件中，那就用Builder 来代替，效果是一样的：

    drawer: Builder(builder: (context) =>
      Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text("Next Page"),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => NextPage()));
              },
            )
          ],
        ),
      ),
    ),

【讨论】：