Summary - Navigator
- Flutter course
- Beginner
- Lesson 90/99
- 4 min
Combine push and pop to make a two-screen flow.
Two-screen flow
To make a two-screen flow, you open the second screen with Navigator.push and return with Navigator.pop. Push creates the new screen via the builder of MaterialPageRoute. Pop closes the top screen and returns to the screen below.
// On the first screen
Navigator.push(context,
MaterialPageRoute(builder: (_) => SecondScreen()));
// On the second screen
Navigator.pop(context);Practice Make a two-screen flow
Write a function akisBaslat that prints Iki ekranli akis. Write a StatelessWidget named IkinciEkran with an ElevatedButton that calls Navigator.pop(context). In main call akisBaslat. On the first screen, open IkinciEkran with Navigator.push.
Starter code
import 'package:flutter/material.dart';
// akisBaslat fonksiyonu yaz: "Iki ekranli akis" yazdirsin
// IkinciEkran adinda bir StatelessWidget yaz
void main() {
// akisBaslat'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// ElevatedButton ekle
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void akisBaslat() {
print('Iki ekranli akis');
}
class IkinciEkran extends StatelessWidget {
const IkinciEkran({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Geri'),
),
),
);
}
}
void main() {
akisBaslat();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const IkinciEkran()),
);
},
child: Text('Ac'),
),
),
),
);
}
}Expected output
Iki ekranli akis
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which methods are used together for a two-screen flow?
- push and push
- push and pop Correct answer
- pop and pop
- create and destroy
Explanation: In a two-screen flow, push opens a new screen and pop returns; push+push, pop+pop or create+destroy are not for this purpose.
2 Add the MaterialPageRoute
Navigator.push(
context,
____(builder: (_) => const IkinciEkran()),
);Navigator.push(
context,
MaterialPageRoute(builder: (_) => const IkinciEkran()),
);Explanation: To create a Material transition route, the MaterialPageRoute class is used; there is no class named WidgetRoute, ScreenRoute or AppRoute.
3 Navigator summary
| Term | Meaning |
|---|---|
Navigator |
Manages screen flow |
push |
Adds a new route |
pop |
Removes the top route |
MaterialPageRoute |
Provides Material transition |