Herkese merhaba arkadaşlar , bu konumuzda Dart Programlama dilinde listeleri ve bu listelerin yapısını göreceğiz.Hemen konuya geçelim
Birden fazla değeri ayrı ayrı değişkenlere atamak yerine, tek bir değişkende saklamak istersek liste yapısını kullanıyoruz. Listeler de bir değişken tipidir.
Bir sınıftaki öğrencilerin, bir kitaptaki karakterlerin ya da bir suluboya paletindeki renklerin isimlerini programımızda daha sonra kullanmak üzere saklamak istiyoruz diyelim.
Kırmızı, Mavi, Lacivert vs. diye renklerimiz olsun. Bunlar birer String değer oldukları için her birini tırnak işaretleri içinde, aralarına birer virgül koyarak, köşeli parantezlerin [ ] içine yazıyorum.
Kod:
["Kırmızı","Mavi","Lacivert"]İşte bu köşeli parantezler listemizdeki değerleri tutuyorlar.
Listeye bir isim verelim ve başına List yazalım.
Kod:
List birinciListe = ["Kırmızı","Mavi","Lacivert"];Listemizi oluşturduk ve kullanmaya hazır. Listeler en hızlı şekilde, başına List yazarak oluşturuluyor. Değişken tipini belirterek liste oluşturmayı birazdan göreceğiz.
Şimdi listemizi yazdıralım.
Kod:
print(birinciListe);diyerek listemizin tamamını tek satır olarak yazdırabiliriz.
Konsol Çıktısı:
Kod:
[Kırmızı, Mavi, Lacivert]Liste elemanlarını tek tek yazdırmak istersek,
Kod:
print(birinciListe[0]);şeklinde yazıyoruz. Bu şekilde köşeli parantezler içerisine liste elemanlarının index değerini yazdık. Her değişkenin içindeki elemanların bir index değeri vardır ve bu değerler program tarafından sıfırdan başlayarak verilir. İlk elemanın index değeri 0'dır.
Yani listedeki elemanlarımıza bu numaralar ile ulaşıyoruz.
Kod:
print(birinciListe[0]);
print(birinciListe[1]);
print(birinciListe[2]);
Kod:
Kırmızı
Mavi
LacivertBu değerleri değiştirmek istediğimizde aynı yöntemle ulaşıp yeni atama yapıyoruz.
birinciListe[0] = "Turuncu";
Kod:
birinciListe[1] = "Yeşil";
birinciListe[2] = "Sarı";var bildirimi ile oluşturduğumuzda ilk atanan değerlere bakılıyor ve listenin içeriğine göre değişken türü otomatik olarak belirleniyor. İlk atamada sadece String değerler atandıysa liste tipi String'dir ve başka değer atanamaz.
Ama eğer ilk atamada değer vermediyseniz ya da farklı değişken türlerini bir arada verdiyseniz de artık listeniz her türden değer alabilir. Bu listelerin tipi Object olarak yorumlanır. Dart dilinde tüm veri tipleri Object sınıfından türetilmiştir.
Her türden değer atanabilecek boş bir liste aşağıdaki şekillerde tanımlanabilirdi.
Kod:
var liste1 = [ ];veya
Kod:
dynamic liste1 = [];veya
Kod:
List liste1 = [];veya
Kod:
List liste1 = List();Eğer tanımladığımız anda değer atamak istersek aşağıdaki şekilde de her türden veriyi bir arada tutan listeler oluşturulabilir.
Kod:
var liste1 = [2, "Ali", "kırmızı", 123.12, 32.45];
Kod:
dynamic liste1 = [2, "Ali", "kırmızı", 123.12, 32.45];
Kod:
List liste1 = [2, "Ali", "kırmızı", 123.12, 32.45];Listeler şu ana kadar öğrendiğimiz diğer veri tipleri belirtilerek de oluşturulabilir. Bunlara tanımlandıkları türler haricinde veri atanamaz. < > işaretleri arasına veri türünü yazıyoruz.
Kod:
List<int> liste1 = [2, 4, 6, 10];
Kod:
List<double> liste2 = [4, 10.2, 123.21, 12312.12312];
Kod:
List<num> liste3 = [2, 3, 123, 423, 21312.1212, 123.23, 44.01];Listeler içerisine diğer değişkenler ve listeler de değer olarak verilebilir.
Kod:
String kelime1 = "mavi";
String kelime2 = "yeşil";
int sayi1 = 4;
List listeBir = [kelime1, "Kırmızı", kelime2, sayi1];
print(listeBir);Konsol Çıktısı:
Kod:
[mavi, Kırmızı, yeşil, 4]Liste elemanları aşağıdaki şekilde yenilenebilir.
Kod:
List listeBir = ["Mavi", "Kırmızı", "Yeşil", "Sarı"];
listeBir = ["Kırmızı", "Turuncu"];
Kod:
print(listeBir);Konsol Çıktısı:
Kod:
[Kırmızı, Turuncu]Eğer listeyi komple yenilemeden içindeki değerleri değiştirmek istersek daha önce gösterdiğimiz gibi index numaralarını kullanırız veya liste metotlarını kullanabiliriz.
index numarasına göre değer değiştirme:
Kod:
List listeBir = ["Mavi", "Kırmızı", "Yeşil", "Sarı"];
listeBir[2] = 123;Listemizin index numarası 2 olan üçüncü elemanı "Yeşil" artık, 123 değeriyle değişmiş oldu.
Kod:
print(listeBir);Konsol Çıktısı:
Kod:
[Mavi, Kırmızı, 2, Sarı]Listeleri Metotlarıyla Değiştirme:
Kod:
List listeBir = ["Mavi", "Kırmızı", "Yeşil", "Sarı"];
listeBir.add("Turuncu");add metodu ile listenin sonuna yeni bir değer ekledik. liste adından sonra nokta koyup metodun adını yazdık ve parantez içersinde yeni değeri verdik.
Kod:
print(listeBir):Konsol Çıktısı:
Kod:
[Mavi, Kırmızı, 2, Sarı, Turuncu]insert metodu indeks numarası kullanarak değer atamamızı sağlar. Bu metotta indekste bulunan eleman silinmez, bu elemanın indeks değeri bir artar ve yeni değer bu indekse yerleşir.
Kod:
List listeBir = ["Mavi", "Kırmızı", "Yeşil", "Sarı"];
listeBir.insert(0, "Kahverengi");
print(listeBir);
[Kahverengi, Mavi, Kırmızı, Yeşil, Sarı]remove metodu ile listedeki eleman kaldırılabilir.
Kod:
List listeBir = ["Kahverengi", "Mavi", "Kırmızı", "Yeşil", "Sarı"];
listeBir.remove("Kahverengi");
print(listeBir);
[Mavi, Kırmızı, Yeşil, Sarı]indeks numarasına göre veri kaldırmak istersek aşağıdaki removeAt metodu kullanılır.
Kod:
listeBir.removeAt(3);Değişkenler ve listelerle kullanılabilecek daha bir sürü metot ve önceden tanımlı fonksiyon var. Bazıları da oldukça ilginç. Mesela shuffle metodu listedeki elemanların yerlerini rastgele değiştiriyor.
Kod:
listeBir.shuffle();Hepsine şimdi ihtiyacımız olmadığı için diğer metotları ve fonksiyonları incelemeyi daha sonraki uygulamalara bırakıyorum ve merak edenler için aşağıda küçük bir kısmını paylaşıyorum.
Tecrübeliler isterlerse listeler ile ilgili özelliklerin tam listesi için dart:core kütüphanesini inceleyebilir: https://api.dart.dev/stable/2.7.2/dart-core/List-class.html
Bazı Liste Metotları ve Fonksiyonları
Kod:
isEmpty //Listenin boş olup olmadığını kontrol eder.
isNotEmpty //Listenin dolu olup olmadığını kontrol eder.
length //Listenin uzunluğunu verir.
first //Listenin ilk elemanını verir.
last //Listenin son elemanını verir.
reversed //Liste elemanlarını ters çevirir, son eleman ilk eleman olur.
removeLast() //Listenin son elemanını kaldırır.
removeAt(0) //Verilen index numarasındaki elemanı kaldırır.
join('*') //Listedeki elemanların arasına tırnak işaretleri içinde yazdığımız karakteri koyar.Sabit Eleman Sayılı Listeler
Şu ana kadar gördüğümüz listeler genişleyen türdeydiler. Ama istersek eleman sayısı sabit olan listeler tanımlayabiliriz. liste1'in maksimum 4 eleman almasını söyledik. Değer ataması yapmadan önce yazdırdığımızda tüm elemanlara varsayılan olarak null değer atandığını görüyoruz. Daha sonra üçüncü indekse "1" değerini atadık ve dördüncü eleman değişti.
Kod:
var liste1 = List(4);
print(liste1);
liste1[3] = "1";
print(liste1);Konsol Çıktısı:
Kod:
[null, null, null, null]
[null, null, null, 1]Ama aşağıdaki şekilde 3 elemanlı bir liste tanımlarsak 3. indekse bir değer atamaya kalktığımızda hata alıyoruz. Çünkü indeks değerleri 0'dan başladığı için artık listemizde son indeks 2 olacaktır ve 3. indeks bulunmayacaktır.
Kod:
var liste1 = List(3);
print(liste1);
liste1[3] = "1";
print(liste1);Konsol Çıktısı:
Kod:
[null, null, null]
Script error.Liste metotları sabit fonksiyonlar için de geçerlidir. Ancak sabit elemanlı listelerde tüm indeksler null değerle dolu olduğundan eleman ekleme metotlarının doğrudan uygulanamayabileceğini ve alternatif çözümler geliştirmeniz gerektiğini göz önünde bulundurun.Şimdi hep beraber basit bir ToDo uygulaması yapalım şuana kadar öğrendiğimiz bilgilerle
Önce uygulama çerçevemizi oluşturuyoruz. Scaffold'un body parametresini aktif edip AnaEkran widget'ımızı koyuyoruz.
Kod:
import 'package:flutter/material.dart';
v o i d main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: "Listeli Bir Şeyler",
home: Iskele(),
);
}
}
class Iskele extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Listeli Bir Şeyler Uygulaması"),
),
body: AnaEkran(),
);
}
}Stateful widget ile AnaEkran widget'ımızı oluşturuyoruz ve Container'ın içine bir Column widget koyarak children parametresini aktif ediyoruz.
Kod:
class AnaEkran extends StatefulWidget {
over ride
_AnaEkranState createState() => _AnaEkranState();
}
class _AnaEkranState extends State<AnaEkran> {
over ride
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
],
),
);
}
}Şimdi de Column'un içine dört widget koyuyoruz. Sırasıyla:
*Bir Flexible widget. (Flexible, birazdan kullanacağımız ListView yapısını koruyup kollayan bir widget. Bu widget ListView ile oluşturulan liste elemanlarının çerçeveye göre esnemesini sağlarken, altındaki TextField sabit kalacak.)
*Bir TextField widget (metin giriş alanı.)
*Bir RaisedButton.
*Bir RasiedButton daha.
Kod:
class AnaEkran extends StatefulWidget {
_AnaEkranState createState() => _AnaEkranState();
}
class _AnaEkranState extends State<AnaEkran> {
[USER=277185]over[/USER]ride
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Flexible(child: null),
TextField(),
RaisedButton(onPressed: null),
RaisedButton(onPressed: null),
],
),
);
}
}Şimdi ikinci class'ın süslü parantezleri içine override ifadesinin üstüne sırasıyla şunları tanımlıyoruz:
*Bir TextEditingController nesnesi (TextField'dan gelen metni tutacak, ismini t1 koydum)
*Boş bir liste. (TextEditingController'ın aldığı metinleri tutacak)
*İki tane fonksiyon. (Butonlara tıklandığında ekrana liste elemanlarını ekleyip çıkartacak. State durumunu değiştirebilmesi ve ekranın yeniden çizilebilmesi için setState yapısını fonksiyonların içine koyuyoruz.)
*Fonksiyon yapısını oluşturduktan sonra isimlerini RaisedButton'ların onPressed parametrelerine veriyoruz.
*TextField'in controller parametresine de TextEditingController nesnesine verdiğimiz ismi t1 yazıyoruz.
Kod:
class AnaEkran extends StatefulWidget {
_AnaEkranState createState() => _AnaEkranState();
}
class _AnaEkranState extends State<AnaEkran> {
TextEditingController t1 = TextEditingController();
List alisverisListesi = [];
elemanEkle() {
setState(() {});
}
elemanCikar() {
setState(() {});
}
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Flexible(child: null),
TextField(
controller: t1,
),
RaisedButton(onPressed: elemanEkle),
RaisedButton(onPressed: elemanCikar),
],
),
);
}
}Fonksiyonların İçeriği
elemanEkle fonksiyonunda setState yapısının süslü parantezleri içine:
.add metodu ile alisverisListesi isimli listemizin sonuna t1'den gelen değeri ekliyoruz.
Butona her basıldığında bu fonksiyon çalışacak. Metin giriş alanında yazılanlar, değer olarak listeye eklenecek.
Ardından t1.clear() diyerek .clear metodu ile metin giriş alanımızı temizliyoruz.
elemanCikar fonksiyonunda da:
remove metodu ile t1'den gelen değeri, eğer alisverisListesi listemizde varsa listeden çıkartabiliyoruz. Ardından t1.clear ile metin giriş alanını temizliyoruz.
Kod:
elemanEkle() {
setState(() {
alisverisListesi.add(t1.text);
t1.clear();
});
}
elemanCikar() {
setState(() {
alisverisListesi.remove(t1.text);
t1.clear();
});
}Flexible widget'ın içeriğine yoğunlaşalım şimdi de.
Flexible'ın child parametresine bir ListView.builder veriyoruz. ListView.builder alisverisListesi'ni kullanarak aşağı kaydırılabilen ve sadece o an gördüğümüz elemanları ekrana çizerek çok sayıda liste elemanını performanslı şekilde gösterebilen liste görünümü oluşturucu bir widget. Bunu verince otomatik olarak kod editörümüz itemBuilder parametresini aktif ediyor. İtem/madde oluşturucu bir parametre bu. alisverisListesi'ni kullanarak bize Flutter ekranında alt alta maddeler hâlinde bir liste yapısı gösterecek.
Kod:
Flexible(child: ListView.builder(itemBuilder: null))itemBuilder'ın null değerini silerek yerine parantez açıp kapatıyorum. Buraya bir kısa fonksiyon yapısı oluşturacağım. Parantezler içerisine iki argüman vermem gerekiyor. Birincisi context. Şu an buradan gelen değer ihtiyacımız yok. Ama boş geçilemez. Geleneksel olarak context yazılır. Eğer kullanmak istemezsek context yerine alt tire _ işareti yazabiliriz.
Kod:
(_, siraNumarasi)İkinci argüman int yani bir tam sayı. Buraya yazdığımız isim index değeri tutan bir tam sayı değişken muamelesi görüyor. Ben siraNumarasi diye bir isim yazıyorum. Sonra fonksiyon kısaltırken kullandığımız şişman oku => parantezin sağına koyuyoruz. Bu kısa fonksiyon, parantezler içerisindeki argümanları kullanarak alisverisListesi elemanlarıyla ekranda itemler oluşturacak.
Kod:
itemBuilder: (context, siraNumarasi) =>Şimdi burada bir listTile widget döndürüyoruz. Biliyorsunuz şişman ok return ifadesi yerine geçerek widget döndürebiliyordu. ListTile olmadan da ListView.builder bize bir liste oluşturabilir. Ancak ListTile, liste görünümünü güzelleştirirken; altbaşlık, tıklama özelliği gibi parametrelerle listemizin işlevselliğini arttırabilen bir widget.
ListTile'ın title parametresini aktif edip içine bir Text widget koyduk. TextWidget'ın içine de alisverisListemiz'in index değerine ulaşan bir Dart kodu yazdık.
Kod:
alisverisListesi[siraNumarasi]itemBuilder parametresinin aldığı fonksiyon yapısının parantezleri içindeki argümanlardan biri olan tam sayı türündeki siraNumarasi argümanı alisverisListemizin index değerini tutuyor. Bu değer TextWidget içindeki yapıya iletiliyor ve alisverisListesinin elemanları ekranda alt alta diziliyorlar.
Kod:
=> ListTile(title: Text(alisverisListesi[siraNumarasi])Flexible widget'ın son hâli aşağıdaki gibi . ListView.builder'ın itemCount parametresini de aktif ediyoruz. Bu parametre bize liste görünümünün uzunluğunu soruyor. Vermezsek çoğu durumda hata alıyoruz. Bu yüzden buraya alisverisListesi'nin eleman sayısını .length metodu ile veriyoruz.
Kod:
Flexible(
child: ListView.builder(
itemCount: alisverisListesi.length,
itemBuilder: (context, siraNumarasi) => ListTile(
title: Text(alisverisListesi[siraNumarasi]),
),
),Eğer aynı kodu şişman ok olmadan uzun fonksiyonla yazmak isteseydik aşağıdaki gibi de yapabilirdik:
Kod:
Flexible(
child: ListView.builder(
itemCount: avrupaUlkeleri.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(avrupaUlkeleri[index]),
);
}),
)Stateful widget'ın tam hâli aşağıda.
Kod:
class AnaEkran extends StatefulWidget {
[USER=277185]over[/USER]ride
_AnaEkranState createState() => _AnaEkranState();
}
class _AnaEkranState extends State<AnaEkran> {
TextEditingController t1 = TextEditingController();
List alisverisListesi = [];
elemanEkle() {
setState(() {
alisverisListesi.add(t1.text);
t1.clear();
});
}
elemanCikar() {
setState(() {
alisverisListesi.remove(t1.text);
t1.clear();
});
}
[USER=277185]over[/USER]ride
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Flexible(
child: ListView.builder(
itemCount: alisverisListesi.length,
itemBuilder: (context, siraNumarasi) => ListTile(
title: Text(alisverisListesi[siraNumarasi]),
),
),
),
TextField(
controller: t1,
),
RaisedButton(onPressed: elemanEkle),
RaisedButton(onPressed: elemanCikar),
],
),
);
}
}Okuduğunuz için teşekkür ederim arkadaşlar bir sonraki konuda görüşmek üzere esen kalın.
Son düzenleme:
