Mengenal Widget di Flutter

Widget adalah elemen dasar dalam pembuatan aplikasi Flutter. Secara sederhana, widget dapat
diartikan sebagai sebuah komponen yang membentuk tampilan UI pada aplikasi. Setiap widget
memiliki fungsi masing-masing dan dapat dikombinasikan dengan widget lainnya untuk membentuk
tampilan aplikasi yang lebih kompleks.

Kelebihan penggunaan widget di Flutter adalah kemudahan dalam membuat tampilan UI yang
responsif dan dinamis. Dengan menggunakan widget, kita dapat mengatur posisi dan ukuran elemen
UI dengan mudah serta mengubah tampilan sesuai dengan interaksi pengguna. Selain itu, Flutter
juga menyediakan banyak widget bawaan seperti text, button, dan image yang siap digunakan tanpa
perlu membuat dari awal.
Dalam konteks pemrograman, istilah "stateless" dan "stateful" merujuk pada dua jenis widget
(komponen) yang digunakan dalam pengembangan aplikasi, terutama ketika berbicara tentang
pembuatan antarmuka pengguna (UI) pada berbagai kerangka kerja atau bahasa pemrograman.

Stateless Widget:

Stateless widget adalah jenis widget yang tidak menyimpan atau mengelola status (state) internal.
Dengan kata lain, sifat dari widget ini sepenuhnya ditentukan oleh properti yang diberikan saat
widget itu dibuat, dan widget tersebut tidak memiliki mekanisme untuk menyimpan informasi atau
mengubah tampilannya sendiri berdasarkan perubahan yang terjadi pada aplikasi atau lingkungan
sekitarnya. Stateless widget bersifat statis dan tidak akan "mengingat" perubahan atau tindakan
sebelumnya.

Contoh penggunaan Stateless Widget adalah tombol (Button) yang hanya merespons ketika diklik
dan mengeksekusi tindakan yang ditentukan saat dibuat. Setiap kali tombol ditekan, widget tersebut
akan merender ulang dengan tampilan yang sama, tanpa mengingat riwayat interaksi sebelumnya.

Stateful Widget:

Stateful widget adalah jenis widget yang dapat menyimpan dan mengelola status (state) internal.
Widget ini memiliki mekanisme untuk mempertahankan informasi dan mengubah tampilannya
berdasarkan perubahan yang terjadi pada aplikasi atau interaksi pengguna. Ketika status (state)
berubah, stateful widget akan di-render ulang dengan tampilan yang sesuai dengan status terkini.

Contoh penggunaan Stateful Widget adalah formulir (Form) yang berisi beberapa isian (input fields).
Ketika pengguna mengisi formulir, stateful widget akan menyimpan nilai-nilai yang diisi oleh
pengguna dan meng-update tampilan sesuai dengan isian tersebut.

Perbedaan dan Kapan Menggunakan:

Perbedaan utama antara keduanya terletak pada bagaimana mereka mengelola informasi dan
tampilan:

a. Stateless Widget:
Tidak menyimpan status internal.

Tidak dapat mengubah tampilan secara otomatis.

Cocok digunakan untuk widget statis yang tidak bergantung pada perubahan data atau interaksi
pengguna.

Efisien untuk komponen yang tidak memerlukan perubahan berulang kali.

b. Stateful Widget:

Dapat menyimpan status internal.

Dapat mengubah tampilan sesuai dengan perubahan status.

Cocok digunakan untuk komponen yang mengandalkan interaksi pengguna dan perubahan data.

Efisien untuk komponen yang memerlukan perubahan tampilan secara dinamis.

Pemilihan antara stateless dan stateful widget tergantung pada kebutuhan aplikasi. Jika Anda
memiliki elemen yang tidak berubah selama sesi aplikasi dan hanya bergantung pada data yang
diberikan pada awal, maka menggunakan stateless widget bisa lebih tepat. Namun, jika Anda
memerlukan elemen yang dinamis dan berubah berdasarkan data atau interaksi pengguna, maka
Anda harus menggunakan stateful widget untuk mengelola status dan tampilan sesuai keadaan
terkini.

Widget Material Design

AppBar adalah widget yang biasanya digunakan sebagai header pada aplikasi. Widget ini memiliki
banyak properti seperti leading, title, actions, dan lain-lain yang memungkinkan kita untuk
menyesuaikan tampilan AppBar sesuai dengan kebutuhan kita.

Elevated button adalah salah satu dari beberapa jenis tombol yang dapat digunakan untuk
mengakses fungsi atau aksi tertentu dalam aplikasi Flutter Anda. Elevated button adalah jenis tombol
yang menonjol di antara elemen-elemen UI lainnya, biasanya memiliki latar belakang yang berbeda
dengan warna yang lebih cerah atau bayangan untuk memberikan tampilan tiga dimensi.

Image adalah sebuah widget yang digunakan untuk menampilkan gambar di antarmuka pengguna
(UI) aplikasi. Gambar dapat berasal dari berbagai sumber, seperti aset lokal, jaringan, atau bahkan
dari kamera perangkat.

Widget Layout

Container adalah salah satu widget layout yang digunakan untuk membuat kotak yang dapat diatur
ukuran dan posisinya. Widget ini sangat fleksibel karena dapat menampung widget lain di dalamnya
dan dapat diatur dengan properti seperti padding dan margin.

Row dan Column adalah widget layout yang digunakan untuk menampilkan widget secara horizontal
(row) atau vertikal (column). Dengan menggunakan widget ini, kita dapat mengatur tata letak widget
secara lebih mudah dan efisien. Kedua widget ini juga memiliki properti seperti mainAxisAlignment
dan crossAxisAlignment untuk mengatur posisi dan jarak antar widget.
Widget Input dan Output

Widget input digunakan untuk memungkinkan pengguna memasukkan data ke dalam aplikasi. Salah
satu contoh widget input yang sering digunakan adalah TextField. Widget ini memungkinkan
pengguna untuk memasukkan teks atau angka melalui keyboard. Selain itu, TextField juga dapat
dikonfigurasi untuk menampilkan berbagai macam tampilan seperti teks hint dan validasi input.

Widget output digunakan untuk menampilkan informasi atau hasil dari proses yang dilakukan oleh
aplikasi. Contohnya adalah widget Text dan Image. Widget Text digunakan untuk menampilkan teks
statis pada layar sedangkan widget Image digunakan untuk menampilkan gambar. Kedua widget ini
dapat dikonfigurasi untuk menampilkan berbagai macam tampilan seperti ukuran, warna, dan font.