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:
1 2 |
dependencies: http: ^0.13.3 |
Şimdi, main.dart dosyasına aşağıdaki kodları ekleyelim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'FutureBuilder Örneği', home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { final String url = 'https://jsonplaceholder.typicode.com/photos'; // JSON veri kaynağı Future<List<dynamic>> _getPhotos() async { var response = await http.get(Uri.parse(url)); // http.get ile veri çekme return json.decode(response.body); // json.decode ile veriyi dönüştürme } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FutureBuilder Örneği'), ), body: FutureBuilder( future: _getPhotos(), // FutureBuilder'a future olarak _getPhotos() fonksiyonunu geçiyoruz. builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { // Future tamamlandıysa return ListView.builder( itemCount: snapshot.data.length, // Liste öğe sayısı itemBuilder: (BuildContext context, int index) { return ListTile( leading: CircleAvatar( backgroundImage: NetworkImage( snapshot.data[index]['thumbnailUrl'], // Resim URL'si ), ), title: Text(snapshot.data[index]['title']), // Resim başlığı subtitle: Text('ID: ${snapshot.data[index]['id']}'), // Resim ID'si ); }, ); } else { // Future tamamlanmadıysa return Center(child: CircularProgressIndicator()); } }, ), ); } } |
Ö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:
1 2 |
dependencies: http: ^0.13.4 |
Daha sonra, main.dart
dosyasına aşağıdaki kodu ekleyin:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'FutureBuilder Example', home: HomePage(), ); } } class HomePage extends StatelessWidget { final String apiUrl = "https://jsonplaceholder.typicode.com/posts"; Future<List<dynamic>> fetchPosts() async { var result = await http.get(Uri.parse(apiUrl)); return json.decode(result.body); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FutureBuilder Example'), ), body: Container( padding: EdgeInsets.all(16.0), child: FutureBuilder<List<dynamic>>( future: fetchPosts(), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { return ListView.builder( itemCount: snapshot.data.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(snapshot.data[index]['title']), subtitle: Text(snapshot.data[index]['body']), ); }, ); } else { return Center( child: CircularProgressIndicator(), ); } }, ), ), ); } } |
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:
1 2 3 4 5 |
dependencies: flutter: sdk: flutter firebase_core: ^1.6.0 cloud_firestore: ^3.1.7 |
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:
1 |
final FirebaseFirestore _firestore = FirebaseFirestore.instance; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
Future<List<String>> _getFirestoreData() async { QuerySnapshot<Map<String, dynamic>> snapshot = await _firestore.collection('myCollection').get(); List<String> dataList = []; snapshot.docs.forEach((doc) { dataList.add(doc['myField']); }); return dataList; } |
Bu fonksiyon, ‘myCollection’ adlı bir Firestore koleksiyonundan ‘myField’ adlı bir alanın değerlerini getiriyor. Sonra bu değerleri bir List
e ekleyip return
ediyor.
Son olarak, bu Future
‘ı bir FutureBuilder
içinde kullanabiliriz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
FutureBuilder<List<String>>( future: _getFirestoreData(), builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot) { if (snapshot.hasData) { return ListView.builder( itemCount: snapshot.data!.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(snapshot.data![index]), ); }, ); } else if (snapshot.hasError) { return Text('An error occurred while loading data.'); } else { return CircularProgressIndicator(); } }, ) |
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.
İlk Yorumu Siz Yapın