how to fix flutter exception : Navigator operation requested with a context that does not include a Navigator

Question

I am trying to create a drawer navigation using flutter framework, but i am getting the following exception every time I run it

Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.

so what is the solution, any help ?

I used Navigator class as the following

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()));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

and the code of the NextPage class is

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"),
        ),
      ),
    );
  }
}

Answer 1

It looks like you don't have a Navigator setup for current context. Instead of using StatefulWidget you should try MaterialApp as your root App. MaterialApp manages a Navigator for you. Here is an example of how to setup an App in your main.dart

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

Answer 2

This is because the context that you're using is from the app level before a Navigator has actually been created. This is a common problem when creating "simple" single file apps in Flutter.

There are a number of possible solutions. One is to extract your Drawer into it's own class (extend Stateless/StatefulWidget accordingly), then in it's build override, the parent Scaffold will have already been created containing a Navigator for you to use.

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()));
            },
          )
        ],
      ),
    );
  }

The other, if you want to keep this Drawer in the same file, is to use a Builder instead, which has the same effect:

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