03.Flutter - Stateless Widget


Stateless Widget

Jika kita melihat sebuah tampilan antar muka pengguna (user interface), tampilan tersebut terdiri dari berbagai jenis widget-widget, tetapi tidak semua tampilan harus bisa berinteraksi dengan user, misalnya sebuah Text, tampilan tersebut hanya menampilkan informasi, tetapi tidak untuk berinteraksi seperti user melakukan tap terhadap text tersebut. Pada saat kita membuat aplikasi flutter, maka kita akan mendapatkan kode bawaan (default) yang dihasilkan oleh flutter tersebut, ada beberapa widget pada aplikasi tersebut, tetapi hanya satu saja widget yang berinteraksi dengan user, yaitu tombol counter dimana user bisa melakukan click (tap) pada tombol tersebut, jadi dapat kita pahami widget yang lainnya hanya digunakan untuk menampilkan sesuatu, bukan untuk berinteraksi dengan user, widget yang tidak berinteraksi dengan user disebut Stateless Widget. Berikut ini adalah kode minimal yang diperlukan untuk membuat Stateless Widget:


Stateless widget diciptakan oleh parent widget didalam metode "build"nya. Stateless Widget diberikan informasi yang diperlukan pada saat diciptakan. Stateless widget menerima informasi berupa argumen dari parent widget didalam metode "build"nya, dimana informasi tersebut disimpan didalam variabel bersifat yang final.

Stateless widget menghasilkan (generate) UI didalam metode "build"nya, yang mana hasilnya dirender oleh Flutter. Stateless widget juga dapat membuat UI menggunakan nilai dari variabel anggotanya (member variable), atau dari sumber lainnya. Stateless widget tidak bisa memaksa dirinya sendiri untuk melakukan rendering ulang.

Ketika Stateless widget diminta untuk membuat (build) UI-nya, stateless widget dapat menggunakan nilai dari variabel membernya untuk merender UI, nilai ini tidak berubah, nilai tersebut di berikan melalui konstruktor. Perhatikan contoh berikut:


Sewaktu membuat UI, Stateless Widget bisa juga mengambil dari sumber lainnya, perhatikan contoh berikut:

Pada contoh program diatas, nilai pada style kita ambil dari Theme, ini adalah kelas yang telah disediakan oleh flutter untuk menangani Tema pada aplikasi kita, hal yang perlu kita ingat adalah kapan metode "build" dieksekusi? metode "build" dieksekusi pada saat pertama kali widget di masukkan kedalam widget tree, kemudian pada saat parent widget berubah, kemudian pada saat nilai dari sumber lainnya berubah. Berikut adalah contoh aplikasi Stateless Widget.

Langkah 1

Buat project baru, lihat disini

Langkah 2

Buka file main.dart di folder lib/, dan hapus seluruh isinya, gantilah dengan kode berikut:

Langkah 3

Jalankan emulator & programmnya, maka tampilannya adalah sebagai berikut:


Langkah 4 

Kita buat sebuah widget stateless baru, widget ini berfungsi untuk menampilkan gambar buku, gambar buku akan kita ambil dari https://openlibrary.org/dev/docs/api/books, berikut adalah kodenya:

Kemudian gantilah kode pada:
Simpan dan lakukan hot reload, maka hasilnya sebagai berikut:


Langkah 5

Kita modifikasi kode kita dengan menambahkan padding antar gambar, sehingga tampilan terlihat lebih baik, kita akan menambahkan padding pada widget BookWidget kita, widget Padding akan menjadi root tree dari BookWidget kita berikut adalah perubahannya:

Tips: 'Pada editor vscode klik kana pada widget Center, kemudian pilih refactor, maka akan muncul pilihan untuk menambah widget menjadi root/top widget, pilih add padding'. 

Simpan dan lakukan hot reload, maka hasilnya menjadi seperti berikut ini:


Final Code

03.Flutter - Stateless Widget 03.Flutter - Stateless Widget Reviewed by jc on July 18, 2019 Rating: 5

No comments:

Powered by Blogger.