Fetching Data: http & FutureBuilder
Penjelasan
Package http menyediakan method get()/post() untuk HTTP request, mengembalikan Future (setara Promise JavaScript). FutureBuilder adalah widget yang otomatis menangani TIGA state sekaligus (loading, error, data) dari sebuah Future, tanpa perlu setState() manual untuk tiap perubahan state.
Contoh Konsep
// flutter pub add http
Future<List<String>> ambilProduk() async {
final response = await http.get(Uri.parse('https://api.contoh.com/produk'));
final data = jsonDecode(response.body) as List;
return data.map((item) => item['nama'] as String).toList();
}
FutureBuilder<List<String>>(
future: ambilProduk(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
return ListView(
children: snapshot.data!.map((nama) => ListTile(title: Text(nama))).toList(),
);
},
)Praktikum
Buat fungsi async ambilArtikel() yang fetch dari 'https://api.contoh.com/artikel', mengembalikan Future<List<String>> berisi judul artikel. Pakai FutureBuilder untuk menampilkan loading/error/daftar hasilnya.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
snapshot.data BERTIPE NULLABLE (List<String>?) sampai data-nya benar-benar tersedia — SELALU cek snapshot.hasData atau pastikan connectionState sudah done SEBELUM mengakses snapshot.data!, kalau tidak bisa terjadi null exception saat widget sempat dirender di tengah proses loading.