Flutter Hero Widget -2(Gelişmiş Kullanım)
Selam Millet!
Bu yazımda güzel bir örnek üzerinde Hero Widget kullanımını göstereceğim. Bir önceki yazımı okumadıysanız Hero widget ile ilgili bilgi sahibi olmak için buradan okuyabilirsiniz.
Örneğimizde 2 sayfa olacak:
- Duyuru Listesi (Duyuru resmi & Duyuru kısa açıklaması)
- Duyuru Detay (Duyuru resmi & Duyuru uzun açıklaması & Tarih vs.)
Fazla uzatmadan Duyuru Listesi sayfasıyla başlayalım
Başlayalım…
İlk olarak duyuru listesi sayfamızı tasarlayalım. Sonucunda aşağıdaki gibi bir ekran olacak.
announcement.dart
Sayfayı her widget ın görevine ve yapısına göre parçaladım. Bu şekilde anlaşılabilirliğinin daha iyi olduğunu düşünüyorum :)
Sayfa açılırken ilk önce initState metodu çalışır daha sonra build çalışır. Bu yüzden initState’te listeyi setList() ile dolduruyorum.
Daha sonra build’de ekranı çizmeye başlıyorum. Uzun uzun sayfadaki kodlardan bahsederek odağımızı dağıtmak istemiyorum, bu yüzden direkt olarak Hero’ya odaklanıyorum :)
Hero _buildCardImage(int index) {
return Hero(
tag: "${announcementList[index].photoUrl}",
child: Image.network(
announcementList[index].photoUrl,
fit: BoxFit.fitHeight,
),
);
}Liste ekranındaki amacım bir sonraki detay sayfası açıldığında buradaki image’in açılacak olan sayfadaki image’e uçarak gitmesi, bu yüzden burada verdiğim tag ile açılacak olan sayfadaki Hero tag’i birbiriyle aynı olmalıdır.
Buradaki en önemli sorulacak sorumuz “dinamik listemdeki her item’ı nasıl diğer sayfaya uçuracağım?”
Elimizdeki verileri düşünelim !
- Liste sayfasında elimde Model List var
- Detay sayfasında ise gelen Model var
Her ikisinin ortak noktası sayfalardaki “MODEL” ler. O zaman tag kısmına Model’de bulunan uniq bir değeri verirsem işimi çok basit bir şekilde yapmış olurum !!
Benim listemde PhotoUrl’ler uniq. Her duyurunun photoUrl’i farklı olduğundan ben url’leri tag olarak atadım. Başka bir senaryoda id leri kullanmak da iyi bir fikir !
Gelelim Detay sayfasına
announcement_detail.dart
uçuş işlemlerinin olmasını istediğim alan image alanı olacağından Hero ile sarmalıyoruz.
return Hero(
tag: "${widget.announcementModel.photoUrl}",
child: Container(
width: double.infinity,
height: 250,
child: Image.network(
widget.announcementModel.photoUrl,
fit: BoxFit.fitHeight,
),
),
);Hero tag’ini sayfaya gelen model’deki photoUrl alanını veriyoruz ve böylece liste sayfasındaki tag ile detay sayfasındaki tag birbirinin aynısı olmuş oluyor. (Bravo bize ! )
Sonuç olarak aşağıdaki gibi mükemmel harika efsane bir UI Animasyonuna sahip olmuş oluyoruz ! :)
Normalde yazıyı kısa tutarak burada bitirmeyi amaçlıyordum fakat bir ufak atraksiyon daha eklemek istiyorum :)
Liste ve detay sayfalarına birer FloatingActionButton ekleyip birbirlerine uçmalarını sağlamak istiyorum. Bunu yaparken sadece kodlar üzerinde son yaptığım değişikliklere değineceğim, oynat bakalım :)
announcement.dart
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "hero_tag",
child: new Icon(Icons.done), onPressed: () {},
),
appBar: _buildAppBar,
body: _buildMainContent,
);
}build’de Scaffold içinde floatActionButton özelliğine Hero ile sarmalanmış bir FloatActionButton ekliyoruz.
announcement_detail.dart
SingleChildScrollView get _buildMainContent {
return SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(children: <Widget>[_buildImageContent, _buildDescriptionContent]),
Positioned(
right: 10.0,
top: 220,
child: new FloatingActionButton(
heroTag: "hero_tag",
child: new Icon(Icons.play_circle_filled),
onPressed: () {
print('FAB tapped!');
},
backgroundColor: Colors.blueAccent,
),
)
],
));
}_buildMainContent içerisini Stack’le sarmalayıp Positioned Widget’ı ile FloatActionButton’ı güzel bir yere yerleştiriyoruz.
Her iki sayfada da FloatActionButton’ları birbirine uçurduğum için burada FloatActionButton’u Hero Widget ile sarmallamadan heroTag özelliğine tag’leri set ederek kullandım.
Burası önemli,
Not: Hero özelliği olan bir widget(FloatActionButton) Hero Widget ile sarmalanamaz, hata alırsınız !
Şimdi son olarak ekranımızı bir görelim
Daha önce de dediğim gibi,
Hero olmadan da listeleriniz olur, sayfalarınız arasında dolaşabilirsiniz, fakat Hero ile uygulamanız daha hoş !
Yazımı okuduğunuz için teşekkürler, umarım faydalı olmuştur. Kodlara aşağıdan erişebilirsiniz. Bir sonraki yazımda görüşmek üzere,
Sevgiyle kalın.
