Perbedaan Stateful dan Stateless Widget di Flutter

Sebelum mulai coba membuat aplikasi dengan Flutter, baiknya memahami dahulu konsep dasar dari komponen-komponennya. Dalam flutter semua komponen disebut dengan Widget. Widget memiliki dua tipe yaitu Stateful dan Stateless. Lalu apa perbedaan Stateful dan Stateless Widget pada aplikasi Flutter ? berikut penjelasannya..

Stateless Widget

Secara sederhana Stateless Widget dapat diartikan sebagai Widget yang tidak dapat dirubah atau tidak akan pernah berubah.

Misal kita mempunya widget yang berisi text “Buku yang dibaca : 1” maka dari mulai text itu dibuat sampai aplikasi berjalan pun text tersebut tetap akan selalu menjadi “Buku yang dibaca : 1“.

Contoh rill dalam penggunaan Stateless Widget biasanya yaitu untuk halaman “Tentang Aplikasi” yang berisi informasi nama atau logo aplikasi, versi dan lainya yang bersifat statis atau tidak perlu ada perubahan

Stateful Widget

Stateful Widget merupakan widget yang dinamis atau dapat berubah. Berbanding terbalik dengan stateless, stateful widget dapat mengupdate tampilan, merubah warna, menambah jumlah baris dll. Jadi dapat disimpulkan bahwa apapun widget yang dapat berubah maka itulah stateful widget.

Merujuk pada contoh kasus sebelumnya dengan text “Buku yang dibaca : 1”, maka di stateful widget kita dapat merubah text tersebut sesuai kebutuhan. Berikut contoh code dan tampilan jika kita ingin membuat angka nya menjadi dinamis

Dapat kita lihat di code baris ke 25 yaitu penggunaan fungsi setState() yang akan bertugas untuk memberitahu widget bahwa ada object yang berubah pada State, sehingga akan melakukan build ulang pada Widget tersebut.

Apakah bisa menggunakan fungsi setState() di Stateless Widget?

Tidak, karena apabila memanggil fungsi setState() di stateless widget maka akan muncul pesan error pada text editor seperti gambar di bawah ini

Kesimpulan

Jika kita ingin membuat komponen sederhana dan bersifat statis maka Stateless Widget adalah pilihan yang tepat. Tetapi apabila membutuhkan komponen yang dinamis maka gunakan stateful widget.

Lalu seperti apa hirarki / struktur widget pada flutter ? silahkan baca disini

Sumber referensi :

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html