Flutter Navigator and Page/Route Navigation Examples

Flutter Navigator Tutorial and Examples

This is a Navigator tutorial and example. We first discuss the Navigator class then look at various examples, for example how to open a different page or screen when a given button is clicked.

What is Navigator?

Navigator is a class responsible for managing a set of child widgets with a stack discipline.

It's not just any class but a widget, meaning we use it as a user interface component. It's a widget as it derives from the StatefulWidget class:

class Navigator extends StatefulWidget{..}

It does belong to the flutter package.

The Navigator is used by apps to display the logical history of different screens. It uses an Overlay with the most recently visited pages visually on top of the older pages. This then allows us to move or transit from one page to another by moving the widgets around in the overlay.

Moreover we can also add a dialog widget in that history and the Navigator will show it.

How to Use the Navigator

Everytime you are interacting with any app, you will be interacting with visual components like buttons and textfields. However these are not being rendered in thin air. Instead they are rendered in full screen elements we call pages or screens.

These are what we call call routes in flutter. They are managed by the Navigator class. This class manages them by providing methods for managing the stack onto which our routes are added. The two of those methods are:
1.Navigator.push and

Navigator.pop.

How to Display a full-screen route

Normally we use a Navigator instantiated for us a by a WidgetsApp or a MaterialApp widget. Then we can refer to that Navigator with Navigator.of() method.

In the below example we use a MaterialApp. It's home will then become the bottom-most route in our stack:

void main() {
  runApp(new MaterialApp(home: new Home()));
}

And now if we want to push a new route on the stack, we can create an instance of MaterialPageRoute with a builder function that creates whatever we wish to display on the screen:

Navigator.push(context, new MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('My Page')),
      body: new Center(
        child: new FlatButton(
          child: new Text('POP'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  },
));

Examples

Let's look at some quick examples:

Example 1 - Simplest Screen/Page/Route Navigation Example

Here's a simple example navigating us to a different route or page.

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    title: 'Navigation',
    home: FirstScreen(),
  ));
}
class FirstScreen extends StatelessWidget {
  @override
  Widget build (BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('1st Screen'),
      ),body: Center(
        child: RaisedButton(
          child: Text('launch screen'),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen()),
            );
          },
        )
      )
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build (BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('2nd Screen'),
      ),body: Center(
        child: RaisedButton(
          child: Text('launch back screen'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      )
    );
  }
}

Example 2 - Open Different Pages/Routes on Button Click

This is a full example to show us how to navigate different screens or pages in flutter. These pages are what we call routes. We will be using the Navigator class to facilitate this navigation.

Video Tutorial

Here's the video tutorial.

(a). Demo

Let's start with the demo.

Flutter Navigator

(b). pubspec.yaml

We can add our app name and description in the pubspec.yaml file. We are not using any third party library.

name: mr_page_navigation
description: A new Flutter project.
dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
dev_dependencies:
  flutter_test:
    sdk: flutter

(c). main.dart

Here's our full main.dart file.

import 'package:flutter/material.dart';
//This is our main class
class MrPageNavigation extends StatelessWidget {
  //BuildContext is a handle to the location of a widget in the widget tree.
  @override
  Widget build(BuildContext context) {
    // The MaterialApp's home is automatically set as the bottom of the navigation stack
    return MaterialApp(
      title: 'Page Navigation App',
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
      home: Homepage(),
    );
  }
}
//<code>Homepage class represents the homepage of our app.
//Has a button for navigating to the second page
//It is a StatelessWidget,meaning that it does not require mutable state.
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //The Scaffold() will create us a visual scaffold for material design widgets.
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        // RaisedButton() creates a filled button.
        child: RaisedButton(
          child: const Text('Go to Page 2 >>'),
          onPressed: () {
            // Pushs the Page2 widget onto the navigation stack
            // MaterialPageRoute() Creates a page route for use in a material design app.
            // MaterialPageRoute class is a modal route that replaces the entire screen with a platform-adaptive transition.
            // Navigator is a widget that manages a set of child widgets with a stack discipline.
            Navigator.of(context).push(MaterialPageRoute(builder: (_) => Page2()));
          },
        ),
      ),
    );
  }
}
//Our Page2.
//Has two button for previous as well as next page navigation
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
      ),
      // body is the the primary content of the scaffold.
      body: new Center(
          child: new Column(
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('<< Go To Previous Page'),
                    //Navigator is a widget that manages a set of child widgets with a stack discipline.
                    onPressed: () => Navigator.of(context).pop(),
                ),
              ),
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Go To Next Page >>'),
                    onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => Page3()),
                ),
              ),
              )
            ],
          ),
        ),
    );
  }
}
//Our Page3. We arrive here from Page2.
//Has a button for navigating us back to that page
class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 3'),
      ),
      body: Center(
        child: RaisedButton(
          child: const Text('<< Go to Previous Page'),
          // Pops Second Screen off the navigation stack
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
    );
  }
}
//our main method. run our app.
void main() {
  runApp(MrPageNavigation());
}

How to Download and Run.

Just copy this code into your project's main.dart file. There is no setup required or any third party dependency.