Özet - Navigator
- Flutter kursu
- Başlangıç
- Ders 90/99
- 4 dk
push ve pop'u birleştirerek iki ekranlı akış yaparsın.
İki ekranlı akış
İki ekranlı bir akış yapmak için Navigator.push ile ikinci ekranı açar, Navigator.pop ile geri dönersin. Push, MaterialPageRoute'ın builder'ı ile yeni ekranı oluşturur. Pop, üstteki ekranı kapatıp alttaki ekrana döner.
// Birinci ekranda
Navigator.push(context,
MaterialPageRoute(builder: (_) => IkinciEkran()));
// İkinci ekranda
Navigator.pop(context);Uygulama İki ekranlı akış yap
akisBaslat adında bir fonksiyon yaz; çağrılınca Iki ekranli akis yazdırsın. IkinciEkran adında bir StatelessWidget yaz; içinde Navigator.pop(context) çağıran bir ElevatedButton olsun. main içinde akisBaslat'ı çağır. Birinci ekranda Navigator.push ile IkinciEkran'ı aç.
Başlangıç kodu
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(),
),
),
);
}
}Örnek çözüm
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'),
),
),
),
);
}
}Beklenen çıktı
Iki ekranli akis
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İki ekranlı akış için hangi metodlar bir arada kullanılır?
- push ve push
- push ve pop Doğru cevap
- pop ve pop
- create ve destroy
Açıklama: İki ekranlı akışta push yeni ekranı açar, pop geri döner; push+push, pop+pop veya create+destroy bu amaca yönelik değildir.
2 MaterialPageRoute'ı ekle
Navigator.push(
context,
____(builder: (_) => const IkinciEkran()),
);Navigator.push(
context,
MaterialPageRoute(builder: (_) => const IkinciEkran()),
);Açıklama: Material geçiş rotası oluşturmak için MaterialPageRoute sınıfı kullanılır; WidgetRoute, ScreenRoute veya AppRoute diye sınıf yoktur.
3 Navigator özeti
| Kavram | Anlamı |
|---|---|
Navigator |
Ekran akışını yönetir |
push |
Yeni rota ekler |
pop |
Üstteki rotayı çıkarır |
MaterialPageRoute |
Material geçişi sağlar |