
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.