Flutter FutureBuilder Kullanımı #137

Kategori Featured, Flutter
16.03.2023
85 Okunma

Flutter’da verilerin asenkron olarak getirilmesi için kullanılan birçok yöntem vardır. Bunlardan biri de FutureBuilder widget’ıdır. FutureBuilder, asenkron bir işlemdeki verileri anlık olarak görüntülemek için kullanılır.

FutureBuilder, gelecekte tamamlanması beklenen bir işlemi başlatır ve işlem tamamlandığında sonucu ekrana yansıtır. FutureBuilder widget’ı, bir Future nesnesi alır ve Future nesnesi tamamlandığında çağrılan bir builder fonksiyonunu içerir. Builder fonksiyonu, Future nesnesi tamamlandığında yeniden çağrılır ve builder fonksiyonu tarafından döndürülen Widget ağacı görüntülenir.

Şimdi, FutureBuilder widget’ını üç örnekle inceleyelim:

Örnek 1: Bir JSON veri kaynağından veri çekme

Bu örnekte, FutureBuilder widget’ını kullanarak bir JSON veri kaynağından veri çekeceğiz ve ListView widget’ı ile birlikte verileri listeleyeceğiz.

Öncelikle, http paketini projemize ekleyelim:

Şimdi, main.dart dosyasına aşağıdaki kodları ekleyelim:

Örnek 2: Veri kaynağından veri almak ve FutureBuilder kullanarak göstermek

Bu örnekte, bir veri kaynağından (API, veritabanı vb.) veri alacağız ve FutureBuilder widget’ını kullanarak alınan veriyi göstereceğiz. Bu örnekte, jsonplaceholder API’sini kullanacağız.

İlk olarak, HTTP isteği yapmak için http paketini ekleyelim. pubspec.yaml dosyasına aşağıdaki satırı ekleyin:

Daha sonra, main.dart dosyasına aşağıdaki kodu ekleyin:

Bu örnekte, fetchPosts adlı bir fonksiyon oluşturduk. Bu fonksiyon, API’dan veri alır ve JSON formatında döndürür. Daha sonra, HomePage sınıfımızda, FutureBuilder kullanarak bu fonksiyondan verileri gösteriyoruz.

FutureBuilder widget’ı, asenkron olarak veri alınması gereken durumlarda kullanılır. Widget’ın future parametresine, verilerin alınacağı Future nesnesi atanır. builder parametresi, Future nesnesinin durumuna göre farklı widget’lar döndürür. Bu örnekte, AsyncSnapshot sınıfı, hasData özelliği ile alınan verilerin var olup olmadığını kontrol eder. Veriler varsa, ListView.builder kullanarak verileri liste şeklinde gösteririz. Veriler yoksa, CircularProgressIndicator kullanarak yükleniyor işlemini gösteririz.

Örnek 3: Firebase Verilerini FutureBuilder ile Getirme

Firebase, popüler bir Backend-as-a-Service (BaaS) hizmetidir ve Flutter uygulamalarında kullanılabilecek birçok araç sunar. Firebase Firestore, gerçek zamanlı veritabanı hizmeti sunar ve bu örnekte Firestore kullanarak FutureBuilder ile veri getireceğiz.

Öncelikle, pubspec.yaml dosyanızda Firebase ve Firestore bağımlılıklarını ekleyin:

Firebase Firestore’a erişmek için, projenizde bir Firebase projesi oluşturmanız ve projenizin Firebase SDK’sını yapılandırmanız gerekir. Daha fazla bilgi için Firebase Dokümantasyonuna bakabilirsiniz.

Firestore’dan veri almak için önce bir FirebaseFirestore örneği oluşturmalıyız:

Daha sonra, bir Future döndüren bir fonksiyon yazacağız. Bu fonksiyon, Firestore’dan verileri getirecek ve bunları bir List olarak döndürecek.

Bu fonksiyon, ‘myCollection’ adlı bir Firestore koleksiyonundan ‘myField’ adlı bir alanın değerlerini getiriyor. Sonra bu değerleri bir Liste ekleyip return ediyor.

Son olarak, bu Future‘ı bir FutureBuilder içinde kullanabiliriz:

FutureBuilder widget’ı, _getFirestoreData() fonksiyonunu çağırarak bir Future döndürür. Bu Future henüz tamamlanmamışsa, CircularProgressIndicator gösterilir. Future tamamlandığında, ListView‘de veriler görüntülenir. Future bir hata verirse, bir hata mesajı gösterilir.

Sonuç

Bu makalede, FutureBuilder widget’ının ne olduğunu ve nasıl kullanılabileceğini öğrendik. FutureBuilder, bir Future döndüren işlemleri asenkron olarak yönetmek için kullanılır.

Comments of this post

Henüz yorum bulunmuyor!