Navigating Between Pages Using the Navigator

One of the most important aspects to any application (mobile or otherwise) is routing. In this article, we'll be investigating how we can navigate between pages using the Navigator.

We'll be starting with a brand new Flutter project:

## New Flutter project
$ flutter create flutter_nav

## Open inside of your editor
$ cd flutter_nav && code .

Creating our pages

We can then go ahead and create two pages that represent screens inside of our application:

// lib/page-one.dart
import 'package:flutter/material.dart';

import './page_two.dart';

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Page One'),
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                  child: FlatButton(
                child: Text('Navigate to Page Two'),
                onPressed: () {
                  // Navigation code here
                },
              ))
            ],
          ),
        ));
  }
}


//lib/page-two.dart
import 'package:flutter/material.dart';

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Page Two'),
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                  child: FlatButton(
                child: Text('Navigate to Page One'),
                onPressed: () {
                  // Navigation code here
                },
              ))
            ],
          ),
        ));
  }
}

We can then update our main.dart to use PageOne as the default root page:

import 'package:flutter/material.dart';

import './page_one.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageOne(),
    );
  }
}

Navigating forward

In order to navigate forward, we'll need to use the Navigator.push method. This can then push a new MaterialPageRoute which will be built by our PageTwo widget.

Inside of PageOne.dart, update the FlatButton's onPressed event to push a new page on to the stack when clicked:

FlatButton(
  child: Text('Navigate to Page Two'),
  onPressed: () {
    Navigator.push(context,
        MaterialPageRoute(
          builder: (context) => PageTwo()
        ));
  }
)

You'll also need to import the Widget that you're looking to build:

import './page_two.dart';

Popping a page from the navigation stack

Now that we're on our PageTwo, we can navigate backward one page by using the Navigator.pop method. This pops the most recent page from the navigation stack and returns us back to PageOne:

FlatButton(
  child: Text('Navigate to Page One'),
  onPressed: () {
    Navigator.pop(context);
  }
)

So there you have it! You've now used Flutter to navigate between two pages using Navigator.push and Navigator.pop.

The code for this article can be found here: https://github.com/developer-school/flutter-navigation-push-pop.