- 24 Nis 2021
- 43
- 0
Merhaba, bu ilk konumda sizlere 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. İşleri basit tutmak için Scaffold'u bu aşamada eklemiyoruz.
Kod:
import 'package:flutter/material.dart';
**** main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[USER=931120]Override[/USER]
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.
Kod:
initialRoute: "/"Şimdi geldi rotalarımızı isimlendirmeye. Bu kodun altında, routes parametresini aşağıdaki gibi aktif ediyoruz.
Kod:
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.
Kod:
"/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.
Kod:
initialRoute: "/"
routes: {
"/": (context) => GirisEkrani(),
"/ProfilSayfasiRotasi": (context) => ProfilEkrani(),
}Kodlarımızın ilk parçası aşağıdaki şekilde görünüyor artık.
Kod:
import 'package:flutter/material.dart';
**** main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[USER=931120]Override[/USER]
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/",
routes: {
"/": (context) => GirisEkrani(),
"/ProfilSayfasiRotasi": (context) => ProfilEkrani(),
},
);
}
}Şimdi iki tane stateful widget oluşturuyoruz. Bu widgetları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:
Kod:
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.
Kod:
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:
Kod:
class GirisEkrani extends StatefulWidget {
[USER=931120]Override[/USER]
_GirisEkraniState createState() => _GirisEkraniState();
}
class _GirisEkraniState extends State<GirisEkrani> {
girisYap() {
Navigator.pushNamed(context, "/ProfilSayfasiRotasi");
}
[USER=931120]Override[/USER]
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 dönmüş oluyoruz.
Kod:
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.
Kod:
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.
Kod:
class ProfilEkrani extends StatefulWidget {
[USER=931120]Override[/USER]
_ProfilEkraniState createState() => _ProfilEkraniState();
}
class _ProfilEkraniState extends State<ProfilEkrani> {
cikisYap() {
Navigator.pop(context);
}
[USER=931120]Override[/USER]
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"),
)
],
),
),
);
}
}
Moderatör tarafında düzenlendi:
.
