Flutter’da SliverAppBar
Also published on Medium.
Herkese selamlar , bugün sizlerle birlikte Flutter’da SliverAppBar class’ını kullanarak basit bir örnek yapacağız.
Öncelikle nedir bu SliverAppBar ?
SliverAppBar Flutter’da bir uygulama başlığının nasıl görüneceğini belirleyen bir widget’tır. Bu widget, uygulama başlığının kaydırılırken değişen bir görünümü olabileceğini ve bu değişimin animasyonlar ile desteklenebileceğini sağlar.
“SliverAppBar”, “CustomScrollView” widget’ı içinde kullanılır ve genellikle bir “AppBar” widget’ının bir türevi olarak düşünülür. Bu widget, aşağı kaydırılırken gizlenip, yukarı kaydırılırken ortaya çıkan bir uygulama başlığı yaratır.
Gerçek hayattan bir örneğimizi tanıyalım :
Gördüğünüz gibi scroll edildikten sonra getiryemek logosu,Konum kısmı sabit bir şekilde kalıyor , Konum kısmının altındaki reklam banner’ı kaybolurken Canın ne çekiyor kısmı onun yerini alarak scroll esnasında sabit kalmaya devam ediyor.
Haydi gelin bu örneğimizi Flutter’da yapalım.
Bu örnekte amacımız sadece SliverAppBar olduğu için örneğin bu konuyla alakalı olan kısımlarını kodlayacağız :
import 'package:flutter/material.dart';
class SliverAppBarExample extends StatelessWidget {
const SliverAppBarExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [],
),
);
}
}
SliverAppBarExample adlı StatelessWidget class’ımızı oluşturduk.
Gördüğünüz gibi Scaffold’un body parametresine CustomScrollView verdik , bu widget bize Slivers kullanmamıza olanak sağladı , şimdi gelin örneğimize göre içini dolduralım.
İlk olarak AppBar’ımızı oluşturuyoruz , buradan sonra yazdığımız her kod slivers kısmının içerisinde olacaktır .
AppBar’ımız GetirYemek logosunu ve altındaki Teslimat adresi kısmını kapsayacaktır :
SliverAppBar(
pinned: true,
expandedHeight: 100,
elevation: 0,
backgroundColor: Colors.purple,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: Container(
height: 50,
width: double.infinity,
color: Colors.white,
child: const Center(
child: Text(
'Teslimat Adresi Belirleyin Widget',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
),
flexibleSpace: const FlexibleSpaceBar(
title: SizedBox(
height: 120,
child: Center(child: Text('Getir Yemek Logo', style: TextStyle(color: Colors.white, fontSize: 25)))),
),
),
Evet AppBar’ımızı oluşturduk ;
pinned:true özelliği sayesinde aşağı scroll edilince kaybolmamasını sağladık .
ExpandedHeight propert’si ise flexibleSpace kısmının scroll en üst kısımdayken ulaşabileceği max height’i belirlemek için kullanılıyor, Örneğimiz de flexibleSpace kısmı her scroll pozisyonunda sabit olduğu için bu değeri 100 girdik çünkü kullanmadığımız 2 property mevcut :
ToolbarHeight ve CollapsedHeight , Collopsed height aşağı scroll durumunda dönüşecek minimum height’i belirliyor . En düşük ToolbarHeight değeri kadar küçülebiliyor , dilerseniz bu property’leri de kendi örneğinizde girip animasyonu daha da canlandırabilirsiniz. Default değerleri 100 girili olduğu için expandedHeight’e bu değeri verdim.
Bottom kısmı ise her koşulda sabit kalıyor.
Evet şuanda GetirYemek Logosu ve altındaki Teslimat adresi kısmını bitirdik.
Şimdi gelelim hemen altındaki scroll edilince kaybolan reklam bannerları kısmına :
SliverToBoxAdapter(
child: SizedBox(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) => Container(
width: 200,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Image(
//random food image
image: NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover,
),
),
),
),
),
),
Evet bu kısımda SliverToBoxAdapter widgetını kullanarak , slivers içerisinde normal bir widget kullanımını sağladık, içerisinde ise basit bir horizontal listview builder bulunmakta. Bu kısım scroll edilince kaybolacak.
Sırada scroll edilince kaybolmayan Canın ne istiyor? kısmı var.
Bu kısmıda SliverAppBar kullanıp pinned:true vererek çözebilirdik ama size Sliver’ların gene pinned:true özelliği olan bir kullanımını daha göstermek istiyorum :
SliverPersistentHeader (
pinned: true,
delegate: MyHeaderDelegate(),
),
Evet SliverPersistentHeader kullandık , kullanımı SliverAppBar ile neredeyse birebir , bunu göstermemin sebebi ise farklı bir çözüm göstermek sizlere.
Pinned:true vererek scroll edilince kaybolmamasını sağladık , şimdi gelelim delegate kısmına verdiğimiz Class’ımıza :
class MyHeaderDelegate extends SliverPersistentHeaderDelegate {
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.purple,
height: 50,
child: const Center(child: Text('Canın ne istiyor? widgetı', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), textAlign: TextAlign.center,)),
);
}
@override
double get maxExtent => 50;
@override
double get minExtent => 50;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
Bu classımızı SliverPersistentHeaderDelegate classından türettik çünkü delegate property’si bu classı alıyor.
Size SliverAppBar’a çok benzediğini söylemiştim , sadece biraz farklılıkları var.
maxExtent scroll yukarıdayken alabileceği max height’i , minExtent ise scroll aşağı durumdayken alabileceği minimum height’i göstermekte.
Lakin döndürmüş olduğumuz Container height’i 50 ona dikkat edin eğer değerleri değiştireceksiniz , container height’i de güncellenmeli.
shouldRebuild ve diğer parametrelerine bu örnekte girmiyoruz ama kısaca bilgi isterseniz ekran yenilendiğinde çalışmasını istediğiniz şeyler için örneğin refresh indicator kullanımı vs.
Son olarak da aşağıdaki kısım için bir SliverList kullanıyoruz :
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
height: 200,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Image(
image: NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover,
),
),
),
childCount: 10,
),
),
SliverList aynı ListViewBuilder’a benziyor sadece Slivers içerisinde direk kullanım diyebiliriz , tabi kendine özgü propertyleri mevcut.
Örneğimizin Sonu :
Gördüğünüz gibi scroll edildikten sonra pinned:true özelliği olanlar kaybolmadı.
Tabi Sliverlar ile birlikte ekran tasarlarken sadece bu özellikten değil bir çok özellikten yararlanabiliriz , bunlardan en güzeli ise bence animasyonlar olacaktır.
Sağlıcakla kalın
Kaynak kod :
GitHub - Yusufihsangorgel/getir_yemek_sliver_app_bar: Flutter Slivers Example