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“.

Perbedaan Stateful dan Stateless

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

statefull

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

Screen Shot 2020 07 29 at 20.39.40

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

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

2 Comments

  1. makasih loh ilmunya saya sekarang lagi belajar flutter tapi berbahasa inggris sehingga tidak max memahami apa yang dijelaskan cuman saya paham apa yang diola. kalau tentang penjelasannya ya pasti nga ngerti sperti Stateless Widget apa maksudnya dan lain lain. tapi dengan situs ini saya jadi lebih paham dan sangat gembira.

    terimah kasih mas.
    ditunggu materi selanjutnya

  2. Keren bet… Anjir tulisannya cakep

Leave a Reply