Apa itu Future Builder

FutureBuilder atau future builder adalah widget di Flutter yang digunakan untuk menangani data yang akan datang atau data yang diperoleh dari operasi yang memakan waktu seperti operasi jaringan. FutureBuilder mengambil sebuah Future sebagai parameter dan membangun widget yang sesuai dengan hasil dari Future tersebut. Jika Future belum selesai, FutureBuilder akan menampilkan widget yang ditentukan sebagai “placeholder”, dan jika Future selesai, FutureBuilder akan membangun widget yang sesuai dengan hasil Future. Ini memungkinkan Anda untuk menangani data yang tidak tersedia saat aplikasi pertama kali dijalankan atau data yang diperoleh dari operasi jaringan tanpa harus menulis kode yang rumit.

Cara Penggunaan

Untuk menggunakan FutureBuilder, Anda harus menambahkan widget tersebut ke dalam layout Anda dan memberikan dua callback sebagai parameter:

  1. future: merupakan Future yang akan digunakan oleh FutureBuilder untuk menentukan kondisi apakah data sudah tersedia atau belum.
  2. builder: merupakan callback yang digunakan untuk membangun widget sesuai dengan hasil Future. callback ini akan menerima dua parameter yaitu BuildContext dan AsyncSnapshot.

FutureBuilder dapat digunakan dengan berbagai jenis Future, diantaranya:

  1. Future yang dihasilkan dari operasi jaringan: Seperti contoh yang telah saya berikan sebelumnya, FutureBuilder dapat digunakan untuk menampilkan data dari operasi jaringan seperti mengambil data dari API.
  2. Future yang dihasilkan dari operasi lokal: FutureBuilder juga dapat digunakan untuk menampilkan data yang diperoleh dari operasi lokal seperti pembacaan file atau akses ke database.
  3. Future yang dihasilkan dari pengolahan data: FutureBuilder dapat digunakan untuk menampilkan hasil dari pengolahan data yang memakan waktu seperti komputasi matematika atau pengolahan gambar.
  4. Future yang dihasilkan dari operasi async lainnya: FutureBuilder juga dapat digunakan dengan berbagai jenis operasi async lainnya seperti mengeksekusi kode dalam background, menunggu timer, dll.

Anda dapat menggunakan FutureBuilder dengan berbagai jenis Future sesuai dengan kebutuhan aplikasi Anda. Namun, perlu diingat bahwa FutureBuilder hanya dapat digunakan dengan Future yang dihasilkan dari operasi yang dapat dibatalkan.

Sebagai contoh, jika Anda ingin menampilkan data dari operasi jaringan menggunakan FutureBuilder, maka kode yang digunakan akan seperti ini :

FutureBuilder(
  future: _getDataFromAPI(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data);
    } else if (snapshot.hasError) {
      return Text("Error: ${snapshot.error}");
    }
    return CircularProgressIndicator();
  },
)

di mana _getDataFromAPI() merupakan fungsi yang mengembalikan Future yang digunakan untuk mengambil data dari API.

Baca Juga

Cara Membuat Chatbot WhatsApp

Anda juga dapat menambahkan widget lain seperti loading atau error message yang muncul saat data belum tersedia atau terjadi kesalahan.

Kode Lengkap

Berikut ini adalah contoh penggunaan FutureBuilder untuk menampilkan data dari operasi jaringan yang mengambil data dari sebuah API:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<String> _getDataFromAPI() async {
    final response = await http.get('https://jsonplaceholder.typicode.com/todos/1');

    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data from API');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example FutureBuilder'),
      ),
      body: Center(
        child: FutureBuilder(
          future: _getDataFromAPI(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data);
            } else if (snapshot.hasError) {
              return Text("Error: ${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Pada kode diatas, FutureBuilder digunakan untuk mengambil data dari API https://jsonplaceholder.typicode.com/todos/1 . Jika Future selesai, FutureBuilder akan menampilkan hasil dari data yang diperoleh dari API. Jika Future belum selesai maka FutureBuilder akan menampilkan CircularProgressIndicator sebagai loading dan jika terjadi error maka akan muncul text error dengan message error yang terjadi.

Perhatikan bahwa kode diatas hanya sebagai contoh dan tidak akan bekerja jika dijalankan karena API yang digunakan tidak akan memberikan respon. Anda perlu menggunakan API yang valid dan memastikan aplikasi diizinkan untuk mengakses API tersebut.