Flutter’da FutureBuilder Kullanımı

Bir başka Dart/Flutter yazıma hoşgeldiniz. Bugünki konu FutureBuilder üzerine. Flutter‘da sıklıkla kullanacağınız bu Widget’ı açıklamak ve örneklerle aksiyonlarını göstermek istiyorum.

Başlayalım. FutureBuilder asenkron çalışan bir Widget’tır ve bu konuda kendine has bir yapısı olduğunu diyebiliriz. FutureBuilder öncelikle 2 tane parametre alır içerisine. Bunlar:

FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot){}
),

Context bildiğimiz üzere uygulamanın ekranında bulunan Widgetlar’ın yerini belirleyen, Widget Tree’de yer alan her elementin barındırdığı bir değişkendir. Widget Tree’de olmazsa olmazımızdır. AsyncSnapshot ise yapacağımız future işleminin dönütünü tutacak değişkendir. Bu değişken, AsyncSnapshot’ı belirtmediğiniz sürece dynamic tiptedir. Değiştirmek isterseniz AsyncSnapshot<String> şeklinde değiştirebilirsiniz.

Peki bu kadar mı? Tabiki hayır. FutureBuilder ile verinize, verinizin durumuna göre değişecek Widgetlar’ı builder: içerisinde belirtmeli ve future: içerisinde network veya servis işlerini yaptırmalısınız.

FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot){}
future: getDocuments(),
),

future kısmında yazacağınız fonksiyon bir Future olmalıdır ve Future değerini döndürmelidir. Bu Future değerini döndürürken ise return await ‘variable’ şeklinde belirtmeyi unutmayın.

Geldik üç nokta bıraktığımız builder kısmına. 🙂 Builder kısmında iki farklı strateji izleyebilirsiniz. ConnectionState’e göre switch-case oluşturabilir veya snapshot.HasData ile if-else yapısı oluşturup verinizin null dönme durumuna göre bir yapı oluşturabilirsiniz.

FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot){
switch(snapshot.ConnectionState){
           case ConnectionState.waiting: return Text('Loading...)
           case ConnectionState.done: ...
           case ConnectionState.active: ...
}
future: getDocuments(),
),

Yukarıdaki yapıyı tercih etmesem de büyük uygulamalar için gerekmekte. ConnectionState’in yapılıp yapılmadığını, beklediğin, aktif olduğunu veya terminate edildiğini anlamak ve buna uygun hatalar döndürmek için gerekli.

FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasData){
   // return Widget
}
else{
  // return fail Widget
}
}
future: getDocuments(),
),

Snapshot’ın veriye sahip olup olmadığını denetleyen snapshot.HasData property’si ise benim kullanımıma daha uygun. Eğer veri hala gelmemişse, else kısmında bir progress bar, circular progress indicator gibi şeyler döndürebilirsiniz. Daha şık durur. Flutter’ın amacı da bu değil mi? 🙂

Bir FutureBuilder daima bir Widget döndürmelidir. Bazen bu kısmı atladığınızda farklı hatalarla karşılaşmanız mümkün. Bu yüzden buna dikkat etmenizi tavsiye ediyorum. Ayrıca FutureBuilder’ı asla direkt olarak bir Column, Row, Flex gibi Widget’lar içerisine yazmayın. FutureBuilder’ın sınırları olmak zorunda! 🙂 Bir Container ile wrap ettikten sonra Container’a sınırlar vermenizi tavsiye ederim.

Bu konuda örnekler incelemek isterseniz Github hesabımı ziyaret edebilirsiniz. Ayrıca özellikle bu konuyu daha iyi anlamak adına bu projeye bakmanızı tavsiye ederim.

Bir sonraki yazım Listview.builder üzerine olacak. Ayrıca yakın zamanda Firebase serisine yeni yazılar eklemeyi planlıyorum. Takipte kalın. 🙂