Haftanın Flutter Widget’ı: CarouselView

 

Herkese merhaba. Bu yazıyla Flutter projeleri geliştirirken kullanabileceğimiz, faydalı olacağını düşündüğüm “Haftanın Flutter Widget’ı” serisine başladığımı duyurmak isterim. İlk haftanın widget’ı, Flutter’ın son versiyonu ile sunulmuş CarouselView widget’ı. Ben bunu kendi geliştirdiğim projemde ilk olarak Container’lara animasyon ekleyerek yapmaya çalışmıştım. Araştırırken bununla ilgili paketler olduğunu görüp paket kullanarak yapmıştım. Şimdi ise Flutter 3.24 versiyonuna sahipseniz bunu klasik widget şeklinde yapabiliyorsunuz, bence büyük kolaylık. Şimdi gelin, detaylıca inceleyelim.

CarouselView Nedir?

CarouselView, bir tür kaydırıcı (slider) bileşenidir. Yani, birden fazla öğeyi (genellikle görseller veya kartlar) yatay veya dikey olarak kaydırabilir ve geçiş yapabilirsiniz. Bu, mobil uygulamalarda oldukça yaygın kullanılan bir özelliktir çünkü kullanıcıların içerikler arasında rahatça geçiş yapabilmesini sağlar.

Nasıl Çalışır?

CarouselView widget’ı, içinde bir dizi sayfa (page) barındırır. Bu sayfalar genellikle birbiriyle benzer bir düzen içerebilir, ancak her biri farklı içerikler sunar. Kullanıcılar parmaklarıyla sağa veya sola kaydırarak bu sayfalar arasında geçiş yapabilir.

Örneğin:

Diyelim ki bir haber uygulamanız var ve bu uygulamada günün en önemli haberlerini göstermek istiyorsunuz. Her haber bir sayfa olabilir ve kullanıcılar bu haberler arasında kolayca geçiş yapabilir. İşte burada CarouselView devreye giriyor!

Nasıl Kullanılır?

CarouselView’ı tipik bir ListView gibi düşünebiliriz ama onun yatay bir yapıda çalışanı gibi anlatırsak daha doğru olur. Birkaç basit parametre ile hemen kullanmaya başlayabiliriz.

Column(
   children: [
      ConstrainedBox(
         constraints: const BoxConstraints(maxHeight: 300.0),
         child: CarouselView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            scrollDirection: Axis.horizontal,
            itemExtent: 400,
            itemSnapping: true,
            backgroundColor: Colors.white,
            elevation: 4.0,
            shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(150),
            ),
            children: [
               Container(
                  color: Colors.yellow,
                  child: const Center(child: Text('Box 1'))),
               Container(
                  color: Colors.blue,
                  child: const Center(child: Text('Box 2'))),
               Container(
                  color: Colors.red,
                  child: const Center(child: Text('Box 3'))),
            ],
         ),
      ),
   ],
),

Kodu çalıştırdığımızda aşağıdaki gibi bir ekran elde ederiz:

Notlar:

• CarouselView’ı ConstrainedBox içerisine yerleştirerek yüksekliği için bir limit belirlemiş olduk.
• itemExtent ile Carousel içerisine gelecek widgetların ana eksende sahip oldukları boyutu belirledik. Örneğimizde scrollDirection horizontal olduğu için ana eksen yatay olan anlamına geliyor. Burada verdiğimiz 400 değeri de Container’ların genişliğini temsil ediyor. Bu değeri 200 olarak verirsek Container’lar dar uzun birer sütun gibi görünmeye başlayacak.
• itemSnapping orijinal düzeni korumak adına scrolling ile ilgili yapılacak bir ayar. Varsayılan olarak false geliyor yani kaydırılacak öğelerden ilk ekrana sığmayan widgetlar yokmuş gibi görünüyor ancak kaydırıldığında görünür hale geliyor. Bu parametreyi true olarak değiştirirsek, bu örneğe göre, ilk ekranda eğer boyutları uygun ise mavi Container’ın bir bölümü görünür oluyor.
• Burada ben kullanmadım ama reverse parametresini de kaydırılacak öğeleri tersten sıralayabilmeye olanak sağlıyor.
• Yine bu örnekte bulunmayan shrinkExtent parametresi de kaydırma sırasında widgetlar için ana eksende izin verilen minimum kapsamı ifade ediyor. Örneğin itemExtent’e 400 değerini, shrinkExtent’e de 150 değerini verdik diyelim. Kaydırma yapılmaya başlanmadan önce 400 genişliğinde bulunan Container kaydırma başladığında ekrandan kaybolana kadar en çok 150 birime kadar düşüyor ve o haliyle gözden kayboluncaya kadar ekranda kayıyor. Varsayılan olarak 0 değeri verilmiş, bir değer belirlemesi yapılmazsa yukarıdaki ekran kaydındaki gibi Container’lar boyutları hiç bozulmadan kaydırılabiliyor.

Bu yazımda sizlere bir yenilik olarak sunulan CarouselWidget’ı anlatmak istedim. Umarım yeterince açık ve anlaşılır yazabilmişimdir.

Herkese iyi kodlamalar.

Selin.