Flutter’da bulunan, state yönetimi ve objelerin yönetimini sağlayan keys, Flutter widgetlarının ID’sidir. Stateless ve Stateful başta olmak üzere tüm widget tiplerinin sahip olduğu bir niteliktir. Başlangıçta çok işinize yaramasa da ilerleyen zamanlarda kompleks UI elementleriyle, animasyonlarla çalışırken ihtiyacınızın olacağı bir sınıftır. Yazının devam eden kısımlarında key, anahtar olarak bahsedilecektir.
Anahtarlar, liste tipi widgetların elementlerini yeniden düzenlemek için kullanılır. Bu düzenleme setState ile yapılabilir fakat her insert/remove gibi operasyonlarda devasa büyüklükteki bir listeyi yeniden çizilmeye zorluyor olmak istemezsiniz. Bu yüzden anahtar kullanımı bu durumda önemlidir.
Anahtar tipleri
ValueKey
Local olarak kullanılan bir anahtar. Değer olarak String veya int alabilir.
ObjectKey
Widget içerisinde eğer kompleks veri sınıfları barındırılıyorsa kullanılması tavsiye edilir.
UniqueKey
Bir widget’ın daima kendine has ve özel bir anahtar almasını sağlar. Build anında oluşturulmaması gerekir.
GlobalKey
Global tipli değişkenlere benzer. GlobalKey olarak belirtilen anahtarlar Flutter uygulamasının her Stack’inden erişilebilir.
Anahtarları incelediysek bu anahtarları kod içerisinde nasıl kullanabiliriz buna bakalım.
Flutter GlobalKey kullanımı
AnimatedList kullanarak iki listenin arasında veri aktarımı yapacağız. Bunu yaparken insertAt ve removeAt fonksiyonlarını kullanacağız. AnimatedList widgetlarının anahtarları üzerinden yapacağımız bu aktarma işlemine öncelikle değişkenlerimizi hazırlayarak başlayalım. Bir Stateful widget içerisine yazmayı unutmayın.
Yazdığımız GlobalKey değişkenlerini AnimatedList içerisine yerleştirelim ve bu widget’ların ne döndüreceğini yazalım.
Sırada ise onPressed metotu içerisine iki liste arasında veri aktarımı yapmamız gerekiyor. Bu aktarımı yaparken de GlobalKey değişkenlerini kullanarak setState yapmadan veriyi düzenlemiş olacağız.
var index = 1;Değiştireceğimiz verinin indisi.
String removedItem = secondList.removeAt(index);İkinci listeden, index alanında bulunan veriyi siliyoruz. removeAt metotu silinen veriyi döndürür.
AnimatedListRemovedItemBuilder builder = (context, animation) {
return SizeTransition(
sizeFactor: animation,
child: ListTile(
title: Text(removedItem),
),
);
};
secondListKey.currentState.removeItem(index, builder);Daha sonra veriyi sileceğimiz widget üzerindeki parçayı yeniden oluşturuyoruz ki sileceğimiz kısmın bir replikasını elde edelim ve bu replika üzerinden silme işlemi yapabilelim.
firstList.insert(index, removedItem);
firstListKey.currentState.insertItem(index);Son olarak da sildiğimiz veriyi birinci listeye ekleyelim.
onPressed içerisindeki kodları derleyecek olursak şu şekilde bir kod parçacığı ortaya çıkıyor.
Tüm kodlarımız hazırsa projeyi derleyin ve listeler arası elemanların silinip eklenmesinin ne kadar kolay olduğunu ve hızlıca gerçekleştiğini görün! Bu işlemi aynı state içerisinde değil de başka bir state içerisinde de yapabilirsiniz. Tam olarak da GlobalKey bu işe yarıyor. 🙂 Normalde yukarıdaki kodlar tek bir state içerisinde gerçekleştiğinden ötürü GlobalKey kullanmak hatta key kullanmak mantıksız denebilir fakat basit bir gösterim olması açısından bu şekilde yapmayı tercih ettim.
Umarım anahtarlar konusunu anlatabilmişimdir. Yazmayı planladığım birçok yazı var. Bir sonraki yazıda Firebase alternatifi olan Supabase’den bahsedeceğim. Takipte kalın! 🙂
Okuyucuya Not
Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.
Sağlıcakla kalın!