Navigation & Routing

In this section, we will discuss navigation and routing in Flutter. It is a core concept of any kind of apps that allows users to move from one page to another.  For example, a simple app that contains different screens and pages like 'about', 'contact', 'home page'. To move from one page to another page is called navigation and the way of handling it is called routing. 

In Flutter, the screen and pages are called a route. In android, it is called Activity, and in iOS, it is similar to ViewController.

In an app, you may need to move from different pages. Flutter provides the routing class MaterialPageRoute, and two methods Navigator.push() and Navigator.pop() to handle navigations. Follow the steps below to navigate from one page to another in Flutter. 

Navigation With Named Routes:

To navigate between different named routes, you need to create those route classes and index them into MaterialApp() widget. For example, create two routes like below:

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar( 
          title: Text("Home Page"),
        ),
        body: Center( 
           child: RaisedButton(
             child: Text("Click on Me"), //click me button
             onPressed: (){
                Navigator.pushNamed(context, "/secondscreen");
             }
           )
        ),
     );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar( 
          title: Text("Second Page"),
        ),
        body: Center( 
           child: RaisedButton(
             child: Text("Go Back"), //go back button
             onPressed: (){
                Navigator.pop(context);
             }
           )
        ),
     );
  }
}

Now index them into MaterialApp() widget. 

MaterialApp(
       initialRoute: '/',
       routes: {
         '/':(context)=>HomePage(),
         '/secondscreen':(context)=>SecondScreen(),
       },
);

Put Navigator.pushNamed() on 'click on me' button like below to go to "secondscreen" route.

RaisedButton(
    child: Text("Click on Me"), //click me button
    onPressed: (){
       Navigator.pushNamed(context, "/secondscreen");
    }
)

Now put Navigator.pop() on "Go Back" button like below to dismiss "secondscreen" route and go back to the home screen.

RaisedButton(
   child: Text("Go Back"), //go back button
   onPressed: (){
        Navigator.pop(context);
   }
)

Output:

First Screen	Second Screen

Navigation Without Named Routes:

To navigate between different pages without named routes, you need to put Navigator.push() method instead of Navigator.pushNamed() and pass MaterialPageRoute class on route parameter. 

RaisedButton(
   child: Text("Click on Me"), //click me button
   onPressed: (){
       Navigator.push(context, MaterialPageRoute(builder: (context){
             return SecondScreen();
          })
      );
   }
)

Note: If you are navigating without named routes, you are not required to mention routes list on MaterialApp widget. 

Passing Data to Forwarding Page:

While navigating from one page to another, you may need to pass data to navigating page. See the example below to pass data from one page to another. 

Step 1: Create a page class with a constructor like below:

class SecondScreen extends StatelessWidget{

  String word;
  int val;
  
  SecondScreen({this.word, this.val});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar( 
          title: Text("Second Page"),
        ),
        body: Center( 
           child: RaisedButton(
             child: Text("Word:$word,  Value:$val, - Go Back"), //go back button
             // you need to put like widget.word on stateful widgets.
             onPressed: (){
                Navigator.pop(context);
             }
           )
        ),
     );
  }
}

Step 2: Now put the command on "Click on Me" button like below:

RaisedButton(
     child: Text("Click on Me"), //click me button
     onPressed: (){
        Navigator.push(context, MaterialPageRoute(builder: (context){
              return SecondScreen(word: "Hello", val:4);
        })
     );
}

Passing data while going back page:

To pass data to the back page, you need to put Navigator.push() method on "Click on Me" or any back buttons like below:

RaisedButton(
    child: Text("Click on Me"), //click me button
    onPressed: () async {
        var backdata =  await Navigator.push(context, MaterialPageRoute(builder: (context){
                return SecondScreen(word: "Hello", val:4);
        })
     );
    print(backdata);
  }
)

On the back button, put Navigator.pop() method like below:

RaisedButton(
    child: Text("Go Back"), //go back button
    onPressed: (){
         Navigator.pop(context, "returntext");
    }
)