Posts

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 :