Flutter’da İsimlendirilmiş Rotalar ile Sayfa Geçişleri | Navigator.pushNamed
Dart & Flutter ile Çapraz Platform Android iOS Mobil Uygulama Geliştirme Dersleri #17
Videolu anlatım kanalımda: https://www.youtube.com/watch?v=j2SwpgZtZe8&list=PLNRtC6HXL3EDnn4naNGqlQSFqGyMXXWow&index=33
Bu derste rota tanımlayarak, uygulamamızın sayfaları arasında geçiş yapmayı öğreneceğiz. MaterialApp’in rota parametrelerini kullanmak sayfalar arası geçiş işlemi yaptırmanın yollarından biridir.
Çerçevemizi MaterialApp’e kadar oluşturuyoruz.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp();
}
}
MaterialApp’in içine rotalar tanımlıyoruz.
Başlangıç rotası belirlemek için kullandığımız initialRoute parametresini aktif edip slash “/” değerini verdik. Başka bir değer de verilebilir ancak bu şekilde “/” değeri verilerek kullanılmasını öneriyoruz. initialRoute, uygulama ilk açıldığında açılacak olan sayfayı temsil ediyor. Artık slash “/” ifadesi bizim başlangıç rotamız.
initialRoute: "/"
Şimdi geldi rotalarımızı isimlendirmeye. Bu kodun altında, routes parametresini aşağıdaki gibi aktif ediyoruz.
initialRoute: "/"routes: {}
routes parametresinin süslü parantezleri arasına rotalarımızı tanımlıyoruz. Rotalar aşağıdaki şekilde önce rota ismi sonrasında da context ve sınıf ismi olarak tanımlanıyor.
“/RotaAdi”: (context) => GosterilecekEkran(),
Bizim rotalarımızın isimleri “/” ve “/ProfilSayfasiRotasi” olacak.
Birazdan Stateful (ya da stateless) widget ile oluşturacağımız sınıflar da (GirisEkrani ve ProfilEkrani) artık bizim ekranlarımız olacak ve biz hangisini görüntülemek istersek o widget görüntülenecek.
initialRoute: "/"routes: {"/": (context) => GirisEkrani(),"/ProfilSayfasiRotasi": (context) => ProfilEkrani(),}
Kodlarımızın ilk parçası aşağıdaki şekilde görünüyor artık.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/",
routes: {
"/": (context) => GirisEkrani(),
"/ProfilSayfasiRotasi": (context) => ProfilEkrani(),
},
);
}
}
Şimdi iki tane stateful widget oluşturuyoruz. Bu widget’ların her birini farklı bir ekran olarak kullanacağız. Her stateful widget içinde Scaffold tanımlamayı unutmuyoruz. Her ekranın bir iskelesi olmalı.
Birinci stateful widget, giriş ekranımız olacak:
Burada ekrana bir buton koyduk. Bir de fonksiyon tanımladık. Butona tıklayınca sayfa değiştirme kodumuz çalışıyor. Fonksiyonun içine tanımladığımız kod şu şekilde:
Navigator.pushNamed(context, "/ProfilSayfasiRotasi");
Bu kod navigator sınıfına ait bir metot.
İsteseydik bu kodu direkt butonun onPressed özelliğine de aşağıdaki gibi tanımlayabilirdik.
onPressed: (){Navigator.pushNamed(context, "/ProfilSayfasiRotasi");},
Ama ben aşağıdaki gibi farklı bir fonksiyon içine tanımlamayı tercih ettim. Kodlarımızın ikinci kısmı, yani GirisEkrani widget’ımız artık bu şekilde görünüyor:
class GirisEkrani extends StatefulWidget {
@override
_GirisEkraniState createState() => _GirisEkraniState();
}class _GirisEkraniState extends State<GirisEkrani> {
girisYap() {
Navigator.pushNamed(context, "/ProfilSayfasiRotasi");
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Giriş Sayfası"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: girisYap,
child: Text('Giriş Yap'),
),
],
),
),
);
}
}
Diğer stateful widget’ımızı da, giriş yaptıktan sonra görüntüleyeceğimiz profil sayfası olarak kullanacağız. Bu widget’ın içeriği de diğeri ile hemen hemen aynı. Çıkış Yap isminde bir buton ekledik. Bu buton da en son açılan ekranı kapatan bir kod çalıştıracak. Bu kodu direkt onPress özelliğine verebilirdik ama aynı fonksiyonu ilerde başka butonlarda da kolayca kullanabilmek ve kod kalabalığı yapmamak için yine ayrı bir fonksiyonun içine tanımlayacağım.
Navigator.pop() son açılan ekranı kapatmayı sağlıyor. Son açılan ekran kapanınca bir önceki ekrana otomatik olarak dönmüş oluyoruz.
Navigator.pop(context);
Burada bu metot yerine, GirisEkrani içerisinde kullandığımız ekran değiştirme metodunu da kullanabilir ve giriş ekranına dönebilirdik.
Navigator.pushNamed(context, "/GirisEkrani");
Ama biz ekran kapatma olayını da görebilmek için Navigator.pop() kullanacağız. Bu iki metot arasında çalışma mantığının yanı sıra, animasyon olarak da bir fark bulunmaktadır. Navigator.pop() ekranı sağa kaydıran bir animasyon gösterirken; Navigator.pushNamed() ekran sağdan geliyormuş gibi bir animasyon gösteriyor kullanıcılara.
Eğer son gittiğimiz ekranda AppBar var ise ve o ekrana isimlendirilmiş bir route ile gelmişsek, Flutter otomatik olarak AppBar’a da bir geri butonu koyar.
ProfilEkrani widget’ımızın son hâli aşağıdaki gibidir. Kodların tamamını en aşağıda bulabilirsiniz.
class ProfilEkrani extends StatefulWidget {
@override
_ProfilEkraniState createState() => _ProfilEkraniState();
}class _ProfilEkraniState extends State<ProfilEkrani> {
cikisYap() {
Navigator.pop(context);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Profil Sayfası")),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: cikisYap,
child: Text("Çıkış Yap"),
)
],
),
),
);
}
}
Tam örnek:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/",
routes: {
"/": (context) => GirisEkrani(),
"/ProfilSayfasiRotasi": (context) => ProfilEkrani(),
},
);
}
}
class GirisEkrani extends StatefulWidget {
@override
_GirisEkraniState createState() => _GirisEkraniState();
}
class _GirisEkraniState extends State<GirisEkrani> {
girisYap() {
Navigator.pushNamed(context, "/ProfilSayfasiRotasi");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Giriş Ekrani")),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(onPressed: girisYap, child: Text("Giriş Yap")),
],
),
),
);
}
}
class ProfilEkrani extends StatefulWidget {
@override
_ProfilEkraniState createState() => _ProfilEkraniState();
}
class _ProfilEkraniState extends State<ProfilEkrani> {
cikisYap() {
Navigator.pop(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Profil Sayfası")),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: cikisYap,
child: Text("Çıkış Yap"),
)
],
),
),
);
}
}Kaynak Udemy | Dart & Flutter & Firebase ile Web - Masaüstü ve Mobil için Kodlama Programlama Yazılım ve Uygulama Geliştirme Kursu: https://www.udemy.com/course/flutterdersleri
