flutter eğitimi

Flutter ListView ve Özellikleri

Merhabalar, bu dersimizde Flutter ListView ve Özellikleri, Android’de ki Listview karşılaştırmasını dair konuları ele alacağız. Android’te ListView oluştururken, özellikle resimli listeler oluştururken, ekstra model sınıfına ihtiyacımız vardı fakat Flutter’da ListView oluştururken herhangi bir model sınıfına ihtiyacımız yoktur. Bunun için flutterda listview oluşturması oldukça basittir.

Öncelikle basit yapıda sadece yazılardan oluşan bir ListView yapısını inceleyip örneğini yapalım. Peki ListView dediğimiz yapı nedir?

ListView’i, birden fazla elemanı olan listeler olarak düşünebiliriz. Bu listemiz, sadece yazılardan oluşabildiği gibi, karışık türden verilerle de oluşturulabilir. ListView, birden fazla widget’tan oluştuğu için children alır.

 ListView(
               children: [
                 
                ListTile(
                  title: Text("Yeter Ki Sonu İyi Bitsin "),
                ),
                 
                 ListTile(
                   title: Text("Gurur ve Önyargı"),
                 ),

                 ListTile(
                   title: Text("Milena'ya Mektuplar"),
                 )
               ],
             ),

Yukarı gördüğümüz, ListView widget’ının içindeki herbir elemanı ListTile widget’ını ekleyerek oluşturduk. Burada sadece yazı olarak title özelliğini kullanarak, aşağıdaki çıktıyı elde ederiz.

Flutter ListView ve Özellikleri

 

Tabi, ListView içinde en çok kullanılan widgetlardan biri olan ListTile’ın başka özellikleri de bulunuyor.

Flutter ListView ve Özellikleri

Title eklediğimiz gibi, subTitle ile bir alt yazı ekleyerek açıklama yapabiliriz.

 ListTile(
                   title: Text("Yeter Ki Sonu İyi Bitsin "),
                   subtitle: Text("William Shakespeare"),
                 ),

Flutter ListView ve Özellikleri

 

İstersek, daha da özelleştirip başına veya sonuna ikonlar yerleştirebiliriz yazılarımızın.

ListView(
               children: [

                 ListTile(
                   title: Text("Yeter Ki Sonu İyi Bitsin "),
                   subtitle: Text("William Shakespeare"),
                   leading: Icon(Icons.arrow_forward_ios_rounded), //başına ikon
                 ),

                 ListTile(
                   title: Text("Gurur ve Önyargı"),
                   subtitle: Text("Jane Austen"),
                   trailing: Icon(Icons.auto_awesome), //sonuna ikon
                 ),

                 ListTile(
                   title: Text("Milena'ya Mektuplar"),
                  subtitle: Text("Franz Kafka"),
                   leading: Icon(Icons.water_damage_rounded),  //başına ikon
                   trailing: Icon(Icons.audiotrack),  //sonuna ikon
                 )

               ],
             ),

"<yoastmark

Listemizde, ikonlar yerine görsellerden de yararlanabiliriz. Icon widget’ı değil de, görsel göstermek için kullandığımız  widget’larından birini ekleyebiliriz.

 ListTile(
                   leading: CircleAvatar(
                     backgroundImage: AssetImage('resimler/elma.png'),
                   ),
                   title: Text('Elma'),
                   subtitle: Text('Kırmızı veya yeşil renklere sahiptir'),
                 ),

"<yoastmark

ListView widget’ında ListTile örnekleri yaptıktan sonra bir de Card widget’ını kullanarak aslında başka istediğimiz widget’larla birleştirebileceğimizi örneklendirelim.

ListView(
        children: <Widget>[

          SizedBox(height: 10,),

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Divider(color: Colors.black, height: 30,),
          ),

            Card(
              margin: EdgeInsets.all(10),
              elevation:20,
              color: Colors.purple[200],
              child: ListTile(
                leading: CircleAvatar(child: Icon(Icons.person),radius: 15,),
                title: Text("Kadriye Macit"),
                subtitle: Text("Ankara"),
                trailing: Icon(Icons.call),
              ),
            ),


          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Divider(color: Colors.black, height: 30,),
          ), //aralarına çizgi tanımlamak için
          //Divider widget'ını tanımlıyoruz

            Card(
              margin: EdgeInsets.all(10),
              elevation:20,
              color: Colors.lightBlue[200],
              child: ListTile(
                leading: CircleAvatar(child: Icon(Icons.person),radius: 15,),
                title: Text("Berkay Çobanbaş"),
                subtitle: Text("İzmir"),
                trailing: Icon(Icons.call),
              ),
            ),

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Divider(color: Colors.black, height: 30,),
          ),

            Card(
              margin: EdgeInsets.all(10),
              elevation:20,
              color: Colors.red[200],
              child: ListTile(
                leading: CircleAvatar(child: Icon(Icons.person),radius: 15,),
                title: Text("Damla Yıldız"),
                subtitle: Text("Mersin"),
                trailing: Icon(Icons.call),
              ),
            ),

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Divider(color: Colors.black, height: 30,),
          ),

        ],
      )

"<yoastmark

Buraya kadar ListView için kullandığımız tüm verileri, biz tek tek elle ekliyorduk. Peki, listeyeleceğimiz elemanlar ya çoksa ve hepsini bu şekilde elle ekleyemeyeceksek ne yapacağız? Veya, veritabanından çekerken nasıl kullanıyoruz? İşte burada, liste yapılarından yardım alıyoruz ve listeyeceğimiz verileri öncelikle tanımlıyoruz.

final ulkeler = ['Türkiye', 'Almanya','Polonya','Portekiz','İtalya',
    'Fransa','Norveç','İsveç','Macaristan','Japonya',
    'Çin','İngiltere','ABD','Avusturya','Avusturalya', 'Mısır'];

List tipinde verilerimizi tanımladıktan sonra, bu verilerimizi ListView.builder() şeklinde gösteriyoruz. Burada, itemCount ile listenin uzunluğunu belirlerken verilerimizi ne şekilde göstereceğimizi ise itemBuilder ile niteliyoruz.

ListView.builder(
            itemCount: ulkeler.length,
            itemBuilder: (context, index){
              return ListTile(
                title: Text(ulkeler[index]),
              )

"<yoastmark

 

Temel olarak, en çok kullanılan kalıplarıyla beraber Flutter ListView ve Özellikleri konusunu işlemiş bulunmaktayız. Bir sonraki dersimizde, navigasyon işlemleriyle beraber sayfa geçişlerini veya sayfa geçişlerinde veri taşımayı öğreneceğiz. Flutter eğitim serisinde yayınlanmış diğer derslere ulaşmak için tıklayabilirsiniz.

Ayrıca konu ile ilgili yorumlarınızı konu altından yapabilir, sorularınızı Mobilhanem Soru&Cevap bölümünden sorabilirsiniz.

101

Kadriye Macit

Kırıkkale Üniversitesi - Bilgisayar Mühendisliği

4 Yorum

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?