Ngopi Ngoding Ngoprek Flutter Bagian 5 : Statefull Widget vs Stateless Widget

Bismillah, alhamdulilah kita sudah sampai pada pembahasan perbedaan statefull widget dan stateless widget, berikut gambar yang menjelaskan perbedaan keduanya

Pada stateless widget, datanya disiapkan sebelum widget dibuat, misal, kita membuat stateleess widget yang menampilkan nilai dari integer, maka nilai integer itu harus disisipkan melalui parameter, dan nilai integer ini tidak bisa dirubah dari dalam widget tersebut, tapi kita bisa merubah nilai integernya melalui statefull widget, dan nilai yang berubah ini bisa digunakan untuk membentuk widget baru.

Stateless widget digunakan untuk menampilkan data yang tidak bisa dirubah oleh User secara mandiri seperti icon, image, button ataupun Text

Berbeda dengan stateless widget, statefull widget bisa melakukan pengolahan data secara mandiri tanpa ketergantungan, dan hasil pengolahan ini bisa ditampilkan secara mandiri ataupun melalui stateless widget yang dipanggil melalui statefull widget.

Statefull widget digunakan untuk menampilkan data yang bisa dirubah oleh User secara langsung seperti checkbox, radio dan textfield.

Untuk memulai praktik, seperti biasa, nyalakan Android Studio dan Genymotion kemudian buka file sebelumnya melalui Visual Studio, dan lakukan flutter attach, silahkan melihat pelajaran sebelumnya jika lupa

Jika diperhatikan gambar dibawah ini, angka 15 berasal dari variabel _counter yang terus ditambahkan melalui fungsi _increment_counter

Scroll Visual Studio untuk mencari void_incrementCounter

Perhatikan gambar diatas, setState berfungsi untuk menggambar ulang statefull widget, maka ketika function _incrementCounter dipanggil, nilai _counter ditambah satu dan tampilan digambar ulang

Menggunakan widget bikinan sendiri

Silahkan tulis skrip seperti di bawah ini

 

Kemudian ketik skrip berikut di bawah elemen Text

Pada skrip di atas kita memberikan parameter jumlah dengan variabel _counter dan parameter key dengan variabel widget.key, apa itu key? insya Allah akan kita bahas di pertemuan lain. Widget jumlahPencetan bertipe stateless, sehingga datanya harus disiapkan dulu, yaitu data jumlahnya berasal dari variabel _counter, maka saat program dijalankan, widget jumlahPencetan menampilkan data jumlah, yang nilainya sama dengan nilai variabel _counter. Berikut tampilan aplikasi ketika dijalankan

Pada pelajaran berikutnya insyaAllah kita akan sering berjumpa dengan stateless dan statefull, sekian dan semoga bermanfaat