Challenge 3
- Flutter course
- Beginner
- Lesson 98/99
- 3 min
Build a two-screen flow with Navigator push and pop.
Two-screen flow
To make a two-screen flow, you open a new 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.
Navigator.push(
context,
MaterialPageRoute(builder: (_) => SecondScreen()),
);Practice Make a simple two-screen flow
Write a function gecisYap that prints Gecis yapildi. Write a StatelessWidget named IkinciEkran. Write a StatelessWidget named BirinciEkran; in its build method, have an ElevatedButton whose onPressed opens IkinciEkran with Navigator.push. In main call gecisYap and start BirinciEkran with runApp.
Starter code
import 'package:flutter/material.dart';
// gecisYap fonksiyonu yaz
// IkinciEkran adinda StatelessWidget yaz
// BirinciEkran adinda StatelessWidget yaz, ElevatedButton ile gecis yapsin
void main() {
}Sample solution
import 'package:flutter/material.dart';
void gecisYap() {
print('Gecis yapildi');
}
class IkinciEkran extends StatelessWidget {
const IkinciEkran({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(body: Center(child: Text('Ikinci')));
}
}
class BirinciEkran extends StatelessWidget {
const BirinciEkran({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'),
),
),
),
);
}
}
void main() {
gecisYap();
runApp(const BirinciEkran());
}Expected output
Gecis yapildi
Practice Make a full two-screen flow
Write a function akisBaslat that prints Akis basladi. Write a StatelessWidget named IkinciEkran with an ElevatedButton that returns to the previous screen. Write a StatelessWidget named BirinciEkran that opens a new screen with an ElevatedButton. In main call akisBaslat and start BirinciEkran with runApp.
Starter code
import 'package:flutter/material.dart';
// akisBaslat fonksiyonu yaz
// IkinciEkran: geri donen bir ElevatedButton olsun
// BirinciEkran: yeni ekran acan bir ElevatedButton olsun
void main() {
}Sample solution
import 'package:flutter/material.dart';
void akisBaslat() {
print('Akis basladi');
}
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'),
),
),
);
}
}
class BirinciEkran extends StatelessWidget {
const BirinciEkran({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'),
),
),
),
);
}
}
void main() {
akisBaslat();
runApp(const BirinciEkran());
}Expected output
Akis basladi
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 pop Correct answer
- build and setState
- init and dispose
- create and destroy
Explanation: In a two-screen flow, push opens a new screen and pop returns; create/destroy, build/setState or init/dispose 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 parts
| Term | Meaning |
|---|---|
Navigator.push |
Opens a new screen |
Navigator.pop |
Closes the top screen |
MaterialPageRoute |
Material transition route |
builder |
Callback that builds the screen |