Flutter Navigator not working

Question

I have app with two screens, and I want to make push from 1st to second screen by pressing button.

Screen 1

import 'package:flutter/material.dart'; import './view/second_page.dart';  void main() => runApp(new MyApp());  class MyApp extends StatefulWidget {   @override   State<StatefulWidget> createState() {     return new MainScreen();   } }  class MainScreen extends State<MyApp> {    @override   void initState() {     super.initState();   }    @override   Widget build(BuildContext context) {     return new MaterialApp(         home: new Scaffold(             appBar: new AppBar(                 title: new Text("Title")             ),             body: new Center(                 child: new FlatButton(child: new Text("Second page"),                     onPressed: () {                       Navigator.push(context,                           new MaterialPageRoute(                               builder: (context) => new SecondPage()))                     }                 )             )         )     );   } } 

Screen 2

import 'package:flutter/material.dart';  class SecondPage extends StatefulWidget {    @override   State<StatefulWidget> createState() {     return new SecondPageState();   } }   class SecondPageState extends State<SecondPage> {    @override   void initState() {     super.initState();   }    @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: new Text("Title"),       ),       body: new Center(         child: new Text("Some text"),       ),     );   } } 

Push not happening and I got this

The following assertion was thrown while handling a gesture: Navigator operation requested with a context that does not include a Navigator. The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

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

What is wrong?

Answer 1

Think of the widgets in Flutter as a tree, with the context pointing to whichever node is being built with the build function. In your case, you have

MainScreen    <------ context   --> MaterialApp    (--> Navigator built within MaterialApp)       --> Scaffold         --> App Bar           --> ...         --> Center           --> FlatButton 

So when you're using the context to find the Navigator, you're using a context for the MainScreen which isn't under the navigator.

You can either make a new Stateless or Stateful Widget subclass to contain your Center + FlatButton, as the build function within those will point at that level instead, or you can use a Builder and define the builder callback (which has a context pointing at the Builder) to return the Center + FlatButton.

Answer 2

Just make the MaterialApp class in main method as this example

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

it works fine for me, I hope it will work with you