Most apps contain several screens for displaying different types of information. For example, an app might have a screen that displays products. When the user taps the image of a product, a new screen displays details about the product.
In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.
This recipe uses the
Navigator
to navigate to a new route.
The next few sections show how to navigate between two routes, using these steps:
- Create two routes.
- Navigate to the second route using Navigator.push().
- Return to the first route using Navigator.pop().
First, create two routes to work with. Since this is a basic example, each route contains only a single button. Tapping the button on the first route navigates to the second route. Tapping the button on the second route returns to the first route.
First, set up the visual structure:
dart
class
FirstRoute
extends
StatelessWidget
{
const
FirstRoute
({
super
.key});
@override
Widget
build
(
BuildContext
context) {
return
Scaffold
(
appBar:
AppBar
(
title:
const
Text
(
'First Route'
),
),
body:
Center
(
child:
ElevatedButton
(
child:
const
Text
(
'Open route'
),
onPressed: () {
// Navigate to second route when tapped.
},
),
),
);
}
}
class
SecondRoute
extends
StatelessWidget
{
const
SecondRoute
({
super
.key});
@override
Widget
build
(
BuildContext
context) {
return
Scaffold
(
appBar:
AppBar
(
title:
const
Text
(
'Second Route'
),
),
body:
Center
(
child:
ElevatedButton
(
onPressed: () {
// Navigate back to first route when tapped.
},
child:
const
Text
(
'Go back!'
),
),
),
);
}
}
To switch to a new route, use the
Navigator.push()
method. The
push()
method adds a
Route
to the stack of routes managed by the
Navigator
. Where does the
Route
come from? You can create your own, or use a
MaterialPageRoute
, which is useful because it transitions to the new route using a platform-specific animation.
In the
build()
method of the
FirstRoute
widget, update the
onPressed()
callback:
dart
// Within the `FirstRoute` widget
onPressed: () {
Navigator
.
push
(
context,
MaterialPageRoute
(builder: (context) =>
const
SecondRoute
()),
);
}
How do you close the second route and return to the first? By using the
Navigator.pop()
method. The
pop()
method removes the current
Route
from the stack of routes managed by the
Navigator
.
To implement a return to the original route, update the
onPressed()
callback in the
SecondRoute
widget:
dart
// Within the SecondRoute widget
onPressed: () {
Navigator
.
pop
(context);
}
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
const FirstRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Route'),
),
body: Center(
child: ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back!'),
),
),
);
}
}
In the previous example you learned how to navigate between screens using the
MaterialPageRoute
from
Material Components
. However, in Flutter you are not limited to Material design language, instead, you also have access to
Cupertino
(iOS-style) widgets.
Implementing navigation with Cupertino widgets follows the same steps as when using
MaterialPageRoute
, but instead you use
CupertinoPageRoute
which provides an iOS-style transition animation.
In the following example, these widgets have been replaced:
This way, the example follows the current iOS design language.
import 'package:flutter/cupertino.dart';
void main() {
runApp(const CupertinoApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
const FirstRoute({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('First Route'),
),
child: Center(
child: CupertinoButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
CupertinoPageRoute(builder: (context) => const SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('Second Route'),
),
child: Center(
child: CupertinoButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back!'),
),
),
);
}
}