Flutter uygulamasında kaydırma çubuğu gösterme (Scroll Effect)
Selamlar. Birden fazla kaydırılabilir durumda olan widget’a nasıl kaydırma efekti ekleyebiliriz konusuna değineceğim. Kendi ihtiyacım için bulduğum bir çözüme benzer bir yöntem deneyeceğim.
Başlamadan önce yapacağımız uygulamanın çıktısını bir görelim.
Sırasıyla ihtiyaçlarımızı görelim daha sonra kodlarımızı yazalım.
- Tasarım olarak ExpansionTile içerisindeki veriye kaydırma özelliği vermek için SingleChildScrollView ekleyeceğim. Kaydırma efekti verebilmek için ise SingleChildScrollView widgetini Scrollbar ile sarmalayacağım.
- Örnek veri için ise bu siteden bir text kopyalıyorum.
Neden böyle bir yapıya ihtiyacımız olacak sorusu aklınıza takılmış olabilir. Biz şuan örnek tasarımda text gösterdik. Yazının yana doğru devam ettiğini kolayca anlamak mümkün olabiliyor. Fakat sizin ihtiyacınız ekranda tam olarak kaydırma efekti belli olmayan bir tasarım olabilir.
Örneğin koltuk dizme. Ekrana dizdiğiniz koltuklar normal ekrana tam sığıyor gibi gözükebilir aynı zamanda yana doğru bu liste uzayabilir. Bu şekilde bir efekt eklediğimiz zaman kullanıcının yapacağı işlemi daha kolay bir şekilde algılamasına yardımcı olabiliriz.
Kod kısmında ise birkaç önemli noktamız var. Bunlardan bir tanesi, kaydırma efektinin hep gözükmesi için Scrollbar widgetimizin isAlwaysShown parametresini true olarak ayarlamamız gerekiyor.
Diğer önemli bir nokta ise her bir yana kaydırılan yapı için farklı bir ScrollController değeri üretmemiz. Tek olarak atanan ScrollController değeri ilk açılan listede başarılı bir şekilde çalışırken diğer açılan listelerde bazen gözükmüyor bazen ise kaydırmaya başladığımızda gözükmeye başlıyor. Liste ekrana sığdığı(içerik taşmadığı zaman) zamanlarda ise efekt kendiliğinden gözükmüyor.
Umarım faydalı olmuştur. Projenin kodlarına aşağıdaki repodan ulaşabilirsiniz.
