Sunday, December 8, 2019

Memahami dan Menggunakan Widget / Class FutureBuilder pada Flutter

Menggunakan FutureBuilder pada Flutter

Memahami dan Menggunakan Widget / Class FutureBuilder pada Flutter - Salah satu widget yang amat sangat penting dalam framework Flutter adalah FutureBuilder, FutureBuilder ini sendiri menurut saya adalah class yang sangat wajib anda ketahui dan pahami penggunaan dan implementasi dalam sebuah Aplikasi.

Tidak seperti widget Flutter secara umum FutureBuilder dalah widget/class kusus pada Flutter yang mana dirinya dibangun atas dasar callback (return) secara asinkron dari sebuah class Future.

Sehinga dengan demkian FutureBuilder sangat cocok untuk membangun / menggambar widget-widget dimana datanya kita dapatkan secara asinkron baik itu data dari network/internet atau data dari file internal. Jika anda belum memahami pemograman asinkron, ada baiknya anda membaca sekilas tentang pemrograman asinkron (futures, async, await) sebagai dasar untuk memahami FutureBuilder pada Flutter.

Kalau saya ceritakan secara garis besarnya, pengertian asinkron dalam pemrograman adalah eksekusi baris code yang tertunda hasilnya, dimana hasil eksekusi dapat terjadi sewaktu-waktu sehingga baris kode selanjutnya (yang sejajar) juga terseksekusi tanpa menunggu hasil eksekusi kode sebelumnya.

Jika anda sudah familiar dengan konsep multithreading dalam pemrograman, cara kerja dari kedua hanya hampir sama. Untuk itu jika anda masih bingung dengan praktik widget FutureBuilder, anda perlu sedikit memabca terkait pemrograman asinkron pada Dart sebagai bahasa pemrograman famework Flutter terebih dahulu.

Kapan FutureBuilder digunakan?

Pada dasarnya, tidak ada yang membatasi kapan anda akan mengimplementasikann widget FutureBuilder pada aplikasi Flutter anda. Namun yang perlu anda ketahui adalah bagaimana cara widget FutureBuilder bekerja, supaya anda paham dan dapat mengimplementasikan dengan tepat, dimana saja titik-titik yang perlu anda gunakan FutureBuilder pada projek Flutter anda.

Yang peru saya ingatkan adalah, pada kasus sesungguhnya kebanyakan developer Flutter akan menggunakan FutureBuilder untuk tampilan/widget-widget yang membutuhkan dari dari Internet. Hanya saja jika implementasi tidak dilakukan secara tepat, maka penggunaan FutureBuilder akan menyebabkan banyak masalah terutama akan membuang banyak resource internet jika kita tidak memanage/mengatur event-nya dengan benar.

Untuk itu hal yang perlu anda ketahui tentang FutureBuilder adalah, widget ini akan dibangun ulang ketika anda melakuan / memanggil fungsi setState() seperti halnya widget lainya. Hanya saja jika anda kurang berpengalaman dalam menggunakan framework Flutter, penggunaan FutureBuilder tidak anda pisah dengan benar yang bisa mengakibatkan perubahan data pada widget yang non FutureBuilder akan memanggil even build dari widget FutureBuilder pada halaman yang sama sehingga terjadi ketidak efektifan metode disini.

Maka dari itu, memahami widget FutureBuilder termasuk sifat-sifat dari widget ini sangatlah penting, kuncinya adalah dengan banyak-banyak latihan agar penggunaan widget FutureBuilder pada apliaksi anda menjadi efektif.

Pada tutorial kali ini, saya hanya sedikit membahas cara menggunakan FutureBuilder dan implementasi sesungguhnya dalam sebuah kode pada framework Flutter.

Kerangka kode widget FutureBuilder

Untuk lebih memahami seperti apda widget FutureBuilder, silahkan perhatikan contoh kode FutureBuilder berikut keterangan komponen-komponen penting didalamnya :
Struktur Kode FutureBuilder
  1. Nilai kembalian dari FutureBuilder adalah sebuah Widget sehingga jika kita ingin membuat fungsi nya, nilai yang harus dikemblaikan adalah class Widget.
  2. FutureBuilder secara umum memiliki type kembalian data yang juga sesuai pada nilai kembalian pda parameter future, jika pada contoh di atas nilai kembalian pada parameter future berupa  Future sehingga FutureBuilder nya harus berupa FutureBuilder, dimana String adaah tipe data yang dikembalikan dari fungsi asinkron Future.
  3. Parameter future digunakan untuk mendefinisikan class Future yang memiliki nilai dangan type data yang sama.
  4. Parameter builder adalah yang akan dipangil setelah fungsi Future selesai, dimana terdapat context dan snapshot untuk mengetahui progress  dari fungsi Future yang kita definisikan.

Membuat Projek Flutter contoh FutureBuilder

1. Buatlah sebuah projek Fluttermelalui Visual Studio Code / Android Studio sesuai kesukaan anda.
2. Tambahkan package http: ^0.12.0+1 pada file pubspec.yaml.
3. Tulislah kode berikut pada file main.dart anda:

Keterangan Kode:
Pada kode di atas, kita membuat aplikasi dengan tampilan utama layout Column dengan 2 widget utama yaitu widget FutureBuilder dan dibawahnya terdapat sebuah RaisedButton yang tujuanya adalah untuk reload/refresh data jika ditekan. Button akan memanggil setState() yang juga akan memanggil fungsi build pada widget FutureBuilder di atas nya.

Source Code Projek

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: