FLUTTER ListView.builder Kullanımı
Herkese merhaba, bu yazımızda Flutter da verileri listeleme işinin nasıl yapıldığını basit bir şekilde anlatıyor olacağım. Hazırsanız başlayalım…
FLUTTER ListView.builder
Bildiğiniz üzere mobil uygulamalarda verileri listeleme işleminin çokça kullanıldığını görürüz. Bu işlemi flutterda gerçekleştirmek ise oldukça basit. Neden, çünkü bunun da bir widget ı var!
Flutterda her şey birer widget!
Bu widget ın adı başlıkta da gördüğünüz üzere ListView Widget. Widget hakkında ayrıntılı bilgiyi flutter ın kendi dökümantasyonunda bulabilirsiniz. Peki nasıl kullanılıyor bu ListView ?
FLUTTER ListView.builder Kullanımı
Öncelikle yeni bir proje oluşturup gereksiz kısımları silerek elimizde boş bir material app bırakıyoruz.
Daha sonrasında proje dizinindeki lib klasörünün içerisine bir dart file oluşturuyoruz. Daha sonrasında bu dosyanın içerisine girip bir statefull widget oluşturuyoruz.
Evet şimdi elimizde boş bir widget var fakat bunun yapısını oluşturmadan evvel yapmamız gereken bir işlem daha var. Öncelikle tekrardan lib klasörünün içerisine bir dosya daha oluşturup buna Post adını verelim. Sonrasında bu dosya içerisinde bir class tanımlayıp bu class a iki tane özellik verelim. Biri title diğeri de icon olsun.
Evet bu dosyayı neden oluşturduk? Bir ListView.builder da belli bir listeyi göstermek istersek eğer elimizde bir liste olması gerek. Bu listede post objeleri yer alacak ve bunu biz kendimiz oluşturacağız.
Gelelim widget ımızın içerisine, burada bir List<Post> tanımlaması yapıp içerisine bir kaç post objesi atalım.
Elimizde artık basit bir veri var ve bunu arayüzümüzde gösterebiliriz. Hemen Widget build fonksiyonunun içerisine girip Container ın içerisine girip gerekli width ve height ayarlamalarını yapalım. Daha sonra Container ın child kısmına ListView.builder() yazalım. İçerisinde hangi listeyi listeleyecek isek onu tanımlamamız gerekiyor. Bunun için içerisindeki itemBuilder kısmına gelip (context, index) tanımlamasını yapıp süslü parantezlerir açalım.
Evet adından da anlaşılacağı üzere itemBuilder bizim listemizdeki elemanları arayüzde göstereceğimiz kısım oluyor. Burada bizden bir widget return etmemiz isteniyor. Biz basit olsun diye bir Card widget ı oluşturalım. Bu widget child olarak içerisine bir ListTile widget ı alsın. Bu widget ta flutter içerisinde material library de hazır olarak bulunduğu için işimizi oldukça kolaylaştıracak.
Evet şimdi en önemli kısma geliyoruz. Gördüğünüz üzere henüz herhangi bir veriyi arayüzde göstermedik. Bunun ilk adımı olarak Post listemizde yer alan iconları bu Card widget ının sol kısmında göstermek isteyelim. Bunun için ListTile widget ı içerisinde yer alan leading propertysine gelip bir Icon widget ı oluşturalım. Peki elimizde var olan icon türünü nasıl bu Icon widget ının içerisinde göstereceğiz. Az evvel yazdığımız itemBuilder içerisindeki index kısmına dikkat edin, bu index listview içerisinde yer alacak elemanların index sayısına tekabül ediyor. Yani bizim işimize şöyle yarıyor; ListView içerisindeki 0. index post listesinin içerisindeki 0. indexten değerleri alacak. Bunu da şu şekilde yaparız. Icon(posts[index].icon) ve bu ListTile içerisindeki title propertysinde de Text(post[index].title) şeklinde kullanırız.
Evet widget ımızın son hali bu şekilde oldu. Daha sonrasında bu widget ı uygulamanın ana sayfasında göstermek için main.dart içerisindeki Scaffold widgetına body olarak vermemiz gerekiyor.
Evet şimdi sıra geldi test etmeye. Çalıştıralım bakalın ne çıkacak karşımıza…
Evet body kısmındaki listeyi beraber yaptık onun dışındakiler benim başka denemelerimden dolayı var onlara takılmayın lütfen.
Kapanış
Evet arkadaşlar uzun zamandır bir yazı paylaşmıyordum nasıl yazdığımı bile unutmuş olabilirim hata yapmış olabilirim. Herhangi bir hata yapmışsam eğer lütfen kusuruma bakmayın ve bu hatayı bana mutlaka bildirin ki insanlara yanlış aktarmış olmayayım. Zamanla bu tip Flutter paylaşımları yapmayı düşünüyorum. Instagramda da hesap açtım orada ise daha kısa tutorial lar atıyorum çeşitli konular hakkında…
Hepinize çok teşekkür ederim bir sonraki yazımda görüşmek üzere.
Instagram : @tiqdev.eth
