Meydan okuma 3
- Flutter kursu
- Başlangıç
- Ders 98/99
- 3 dk
Navigator push ve pop ile iki ekranlı akış yaparsın.
İki ekranlı akış
İki ekranlı bir akış yapmak için Navigator.push ile yeni 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.
Navigator.push(
context,
MaterialPageRoute(builder: (_) => IkinciEkran()),
);Uygulama İki ekranlı basit akış yap
gecisYap adında bir fonksiyon yaz; çağrılınca Gecis yapildi yazdırsın. IkinciEkran adında bir StatelessWidget yaz. BirinciEkran adında bir StatelessWidget yaz; build metodunda bir ElevatedButton olsun ve onPressed'da Navigator.push ile IkinciEkran'ı açsın. main içinde gecisYap'ı çağır ve runApp ile BirinciEkran'ı başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// gecisYap fonksiyonu yaz
// IkinciEkran adinda StatelessWidget yaz
// BirinciEkran adinda StatelessWidget yaz, ElevatedButton ile gecis yapsin
void main() {
}Örnek çözüm
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());
}Beklenen çıktı
Gecis yapildi
Uygulama Tam iki ekranlı akış yap
akisBaslat adında bir fonksiyon yaz; çağrılınca Akis basladi yazdırsın. IkinciEkran adında bir StatelessWidget yaz; içinde geri dönen bir ElevatedButton olsun. BirinciEkran adında bir StatelessWidget yaz; ElevatedButton ile yeni ekran açsın. main içinde akisBaslat'ı çağır ve runApp ile BirinciEkran'ı başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// akisBaslat fonksiyonu yaz
// IkinciEkran: geri donen bir ElevatedButton olsun
// BirinciEkran: yeni ekran acan bir ElevatedButton olsun
void main() {
}Örnek çözüm
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());
}Beklenen çıktı
Akis basladi
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 pop Doğru cevap
- build ve setState
- init ve dispose
- create ve destroy
Açıklama: İki ekranlı akışta push yeni ekranı açar, pop geri döner; create/destroy, build/setState veya init/dispose 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 parçaları
| Kavram | Anlamı |
|---|---|
Navigator.push |
Yeni ekran açar |
Navigator.pop |
Üstteki ekranı kapatır |
MaterialPageRoute |
Material geçiş rotası |
builder |
Ekranı oluşturan callback |