Navigator.push
- Flutter kursu
- Başlangıç
- Ders 87/99
- 4 dk
Navigator.push ile yeni ekran açmayı öğrenirsin.
Navigator.push nedir?
Navigator.push, yığına yeni bir route ekleyerek yeni ekran açar. İlk parametre context, ikinci parametre ise açılacak route'tur. Route genellikle MaterialPageRoute olarak oluşturulur.
Navigator.push(
context,
MaterialPageRoute(builder: (_) => IkinciEkran()),
);context parametresi
context parametresi, Navigator'a çağrının widget ağacındaki konumunu bildirir. Scaffold veya benzeri bir widget içinden çağrıldığında context genellikle build metodunun parametresinden alınır. context olmadan Navigator, hangi sayfadan açıldığını bilemez.
Uygulama Navigator.push ile ikinci ekran aç
ac adında bir fonksiyon yaz; çağrılınca Ekran acildi yazdırsın. IkinciEkran adında bir StatelessWidget yaz. main içinde ac'ı çağır. Birinci ekranda bir ElevatedButton olsun ve onPressed'da Navigator.push ile IkinciEkran'ı açsın.
Başlangıç kodu
import 'package:flutter/material.dart';
// ac fonksiyonu yaz: "Ekran acildi" yazdirsin
// IkinciEkran adinda bir StatelessWidget yaz
void main() {
// ac'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 ac() {
print('Ekran acildi');
}
class IkinciEkran extends StatelessWidget {
const IkinciEkran({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(body: Center(child: Text('Ikinci')));
}
}
void main() {
ac();
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: const Text('Ac'),
),
),
),
);
}
}Beklenen çıktı
Ekran acildi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Navigator.push ne yapar?
- Ekranı yeniden çizer
- Yeni ekranı yığına ekler Doğru cevap
- Klavyeyi açar
- Üstteki ekranı çıkarır
Açıklama: Navigator.push yığına yeni bir route ekleyerek yeni ekran açar; ekran çıkarmaz, yeniden çizmez veya klavye açmaz.
2 push metodunu ekle
Navigator.____(context, MaterialPageRoute(builder: (_) => Scaffold()));Navigator.push(context, MaterialPageRoute(builder: (_) => Scaffold()));Açıklama: Yeni ekran açmak için Navigator.push metodu kullanılır; pop ekran kapatır, replace ve remove farklı işlemler yapar.
3 push parametreleri
| Kavram | Anlamı |
|---|---|
Navigator.push |
Yeni ekran açar |
context |
Widget ağacı konumu |
MaterialPageRoute |
Rota oluşturur |
builder |
Ekranı inşa eder |