MaterialPageRoute
- Flutter kursu
- Başlangıç
- Ders 88/99
- 4 dk
MaterialPageRoute ile Material geçiş animasyonu yapmayı öğrenirsin.
MaterialPageRoute nedir?
MaterialPageRoute, Material tasarımına uygun geçiş animasyonu sağlayan route sınıfıdır. builder parametresi, açılacak ekranı oluşturan bir fonksiyon alır. Android'de yukarıdan aşağa, iOS'te sağdan sola geçiş animasyonu yapar.
MaterialPageRoute(
builder: (context) => IkinciEkran(),
)builder parametresi
builder, bir BuildContext parametresi alan ve bir Widget döndüren callback fonksiyonudur. MaterialPageRoute, bu fonksiyonu çağırarak yeni ekranı oluşturur. Parametre adı genellikle _ olarak yazılır çünkü kullanılmaz; ama istenirse context de verilebilir.
Uygulama MaterialPageRoute ile geçiş yap
gecis adında bir fonksiyon yaz; çağrılınca Gecis yapildi yazdırsın. main içinde gecis'i çağır. Bir ElevatedButton ekle ve onPressed'da MaterialPageRoute kullanarak Scaffold ekranı aç.
Başlangıç kodu
import 'package:flutter/material.dart';
// gecis fonksiyonu yaz: "Gecis yapildi" yazdirsin
void main() {
// gecis'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 gecis() {
print('Gecis yapildi');
}
void main() {
gecis();
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: (_) => Scaffold()),
);
},
child: Text('Gecis'),
),
),
),
);
}
}Beklenen çıktı
Gecis yapildi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 MaterialPageRoute'ın builder parametresi ne döndürür?
- int
- bool
- String
- Widget Doğru cevap
Açıklama: builder parametresi bir Widget döndüren callback fonksiyonudur; String, int veya bool döndürmez.
2 builder parametresini ekle
MaterialPageRoute(
____: (_) => Scaffold(),
)MaterialPageRoute(
builder: (_) => Scaffold(),
)Açıklama: MaterialPageRoute'ın ekranı oluşturan parametresi builder'dır; child, widget veya screen geçerli parametre adları değildir.
3 MaterialPageRoute parçaları
| Kavram | Anlamı |
|---|---|
MaterialPageRoute |
Material geçiş rotası |
builder |
Ekranı oluşturan callback |
transition |
Geçiş animasyonu |
Navigator |
Rotayı çağırır |