Merhaba arkadaşlar bu yazımda Flutter’da etkileyi bir AppBar yapımından bahsedeceğim. Bilginiz üzere Scaffold içine AppBar tanımlayabiliyorduk. Ama bu AppBar çok klasik ve durağan bir yapıya sahip. Çalışmalarınıza haraketli (örn; sayfayı yukarı kaydırınca küçülen) AppBar tanımlamak isterseniz kullanacağınız yapı SliverAppBar olmalıdır. Ben bu yapının görselini gif olarak paylaştım, bu yapıyı inceleyebilirsiniz.
Şimdi ben burada gridview ve listview gibi farklı listeleri bir arada kullandım. Bunları bir arada kullanmamı sağlayan yapı ise CustomScrollView’dir. Arkadaşlar ben bu yapıda resim kullandım ama isterseniz düz bir renk de kullanabilirsiniz. Eğer resim kullanmak istemiyorsanız paylaşmış olduğum kodlardan flexibleSpace yapısını silmeniz gerekir. Kodlarımız aşağıdaki gibi olmalıdır;
CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Colors.orange,
expandedHeight: 300,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text("Yeni AppBar"),
centerTitle: true,
background: Image.asset("lib/resimler/sunflowers.jpg",fit: BoxFit.cover,),
),
),
);Eklemiş olduğunuz AppBar’ı kullanabilmek için altına elemanlar eklemeniz gerekir. Yani sayfada scroll olması gerekir ki bu yapı tam olarak görülebilsin. Bunun için ben SliverList ekledim, içine de birkaç tane container koydum. Aşağıda eklemiş olduğum tüm kodlar mevcuttur.
CustomScrollView(
slivers: [
SliverAppBar(
//title: Text("Sliver AppBar Kullanımı"),
backgroundColor: Colors.orange,
expandedHeight: 300,
floating: false,
pinned: true,
//snap: true,
flexibleSpace: FlexibleSpaceBar(
title: Text("Yeni AppBar"),
centerTitle: true,
background: Image.asset("lib/resimler/sunflowers.jpg",fit: BoxFit.cover,),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(
alignment: Alignment.center,
color: Colors.blue,
height: 100,
child: Text("merhaba flutter 1",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.pink[200],
height: 100,
child: Text("merhaba flutter 2",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.teal,
height: 100,
child: Text("merhaba flutter 3",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.grey,
height: 100,
child: Text("merhaba flutter 4",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.orange[300],
height: 100,
child: Text("merhaba flutter 5",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.blue,
height: 100,
child: Text("merhaba flutter 6",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.pink[200],
height: 100,
child: Text("merhaba flutter 7",textAlign: TextAlign.center,),
),
Container(
alignment: Alignment.center,
color: Colors.teal,
height: 100,
child: Text("merhaba flutter 8",textAlign: TextAlign.center,),
),
]
),
),
],
);