FutureWidget

Pengantar

FutureWidget adalah cara sederhana untuk merender Future di proyek Nylo Website Anda. Widget ini membungkus FutureBuilder Flutter dan menyediakan API yang lebih bersih dengan status loading bawaan.

Saat Future Anda sedang berlangsung, widget akan menampilkan loader. Setelah Future selesai, data dikembalikan melalui callback child.

Penggunaan Dasar

Berikut contoh sederhana penggunaan FutureWidget:

// A Future that takes 3 seconds to complete
Future<String> _findUserName() async {
  await sleep(3); // wait for 3 seconds
  return "John Doe";
}

// Use the FutureWidget
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: FutureWidget<String>(
         future: _findUserName(),
         child: (context, data) {
           // data = "John Doe"
           return Text(data!);
         },
       ),
    ),
  );
}

Widget akan secara otomatis menangani status loading untuk pengguna Anda hingga Future selesai.

Menyesuaikan Status Loading

Anda dapat menyesuaikan tampilan status loading menggunakan parameter loadingStyle.

Gaya Loading Normal

Gunakan LoadingStyle.normal() untuk menampilkan widget loading standar. Anda dapat secara opsional menyediakan widget child kustom:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.normal(
    child: Text("Loading..."), // custom loading widget
  ),
)

Jika tidak ada child yang disediakan, loader default aplikasi Nylo Website akan ditampilkan.

Gaya Loading Skeletonizer

Gunakan LoadingStyle.skeletonizer() untuk menampilkan efek loading skeleton. Ini sangat cocok untuk menampilkan placeholder UI yang sesuai dengan tata letak konten Anda:

FutureWidget<User>(
  future: _fetchUser(),
  child: (context, user) {
    return UserCard(user: user!);
  },
  loadingStyle: LoadingStyle.skeletonizer(
    child: UserCard(user: User.placeholder()), // skeleton placeholder
    effect: SkeletonizerEffect.shimmer, // shimmer, pulse, or solid
  ),
)

Efek skeleton yang tersedia:

• SkeletonizerEffect.shimmer - Efek shimmer animasi (default)
• SkeletonizerEffect.pulse - Efek animasi berkedip
• SkeletonizerEffect.solid - Efek warna solid

Tanpa Gaya Loading

Gunakan LoadingStyle.none() untuk menyembunyikan indikator loading sepenuhnya:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.none(),
)

Penanganan Error

Anda dapat menangani error dari Future Anda menggunakan callback onError:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  onError: (AsyncSnapshot snapshot) {
    print(snapshot.error.toString());
    return Text("Something went wrong");
  },
)

Jika tidak ada callback onError yang disediakan dan terjadi error, SizedBox.shrink() kosong akan ditampilkan.

Parameter