
Cara Mudah menggunakan FutureBuilder pada Flutter
Flutter sangat mendukung pemrogramman asinkron, untuk memudahkan kita dalam menangani proses asinkron ini, maka kita menggunakan FutureBuilder.
Dengan menggunakan FutureBuilder, kita bisa dengan mudah mendapatkan status dari proses yang sedang kita jalankan sehingga memudahkan kita dalam menentukan apa yang akan ditampilkan ke user saat status tertentu, misalnya seperti menampilan loading saat memuat data dari server menggunakan API, lalu menampilkan datanya saat sudah siap.
Untuk membuatnya, sangat sederhana yaitu :
FutureBuilder (
future: http.get(""),
builder: (context, snapshot) {
// do something
}
)
untuk pengecekan statusnya, kita bisa membuat kondisional menggunakan if else
FutureBuilder (
future: // process asinkron,
builder: (context, snapshot) {
if (snapshot.hasData) {
// jika sudah ada data
} else {
return Center (
child: CircularProgressIndicator()
);
}
}
)
Sekarang kita akan coba mengimplementasikannya
Buat project baru seperti dibawah ini

Kita akan menggunakan API EndPoint berikut:
https://www.themealdb.com/api/json/v1/1/filter.php?c=Vegetarian
Kita juga butuh library http, tambahkan di pubspec.yaml seperti berikut, lalu pub get :

Jika sudah, buat sebuah class Seafood, lalu kita isikan seperti berikut :
class Vegetarian extends StatelessWidget {
getSeafood() async {
var response = await http.get("https://www.themealdb.com/api/json/v1/1/filter.php?c=Vegetarian");
return jsonDecode(response.body);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Vegetarian"),
),
body: FutureBuilder(
future: getSeafood(),
builder: (context, snapshot) {
if (snapshot.hasData) {
print(snapshot.data);
var listSeafood = snapshot.data['meals'];
// tampilkan dvarata
return ListView.builder(
itemCount: listSeafood.length,
itemBuilder: (context, index) {
return ListTile(
contentPadding: EdgeInsets.all(8),
leading: Image.network(listSeafood[index]['strMealThumb']),
title: Text(listSeafood[index]['strMeal']),
);
}
);
} else {
return Center (
child: CircularProgressIndicator()
);
}
},
),
);
}
}
lalu pada class utama, kita ubah menjadi seperti berikut :
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Vegetarian(),
);
}
}
dan hasilnya :
