Aplikita Enterprise - Konsep Widget dalam Flutter Stateless vs Stateful Widget Dijelaskan Tuntas

Konsep Widget dalam Flutter: Stateless vs Stateful Widget Dijelaskan Tuntas

/in /by /Views: 65

Aplikita.com – Dalam pengembangan aplikasi menggunakan Flutter, ada satu konsep yang benar-benar menjadi fondasi utama, yaitu widget. Jika kamu memahami widget secara mendalam, maka 70% proses belajar Flutter sebenarnya sudah kamu kuasai. Sebaliknya, jika konsep ini belum benar-benar dipahami, maka pengembangan UI akan terasa membingungkan.

Flutter sepenuhnya berbasis widget. Semua yang tampil di layar adalah widget. Teks adalah widget. Tombol adalah widget. Layout seperti Column dan Row adalah widget. Bahkan struktur aplikasi seperti MaterialApp juga merupakan widget. Pendekatan ini disebut sebagai widget tree, yaitu struktur hierarki yang membentuk tampilan aplikasi dari atas ke bawah.

Secara umum, widget dalam Flutter terbagi menjadi dua jenis utama: StatelessWidget dan StatefulWidget. Memahami perbedaan keduanya sangat penting karena berkaitan langsung dengan bagaimana UI bereaksi terhadap perubahan data.

StatelessWidget adalah widget yang bersifat immutable atau tidak memiliki state yang berubah selama lifecycle-nya. Artinya, setelah widget dibuat, tampilannya tidak akan berubah kecuali ada rebuild dari parent widget.

Contoh sederhana StatelessWidget:

class HaloWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("Halo Flutter");
}
}

Widget ini hanya menampilkan teks statis. Tidak ada data yang berubah, tidak ada interaksi yang memengaruhi tampilannya. Inilah karakteristik utama StatelessWidget: sederhana, ringan, dan cocok untuk UI yang tidak dinamis.

Sebaliknya, StatefulWidget digunakan ketika UI perlu berubah berdasarkan interaksi pengguna atau perubahan data. Contohnya adalah counter, form input, toggle button, atau loading indicator.

Struktur StatefulWidget terdiri dari dua class: class utama dan class State.

Contoh sederhana:

class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}class _CounterWidgetState extends State<CounterWidget> {
int counter = 0;void tambah() {
setState(() {
counter++;
});
}@override
Widget build(BuildContext context) {
return Column(
children: [
Text(‘$counter’),
ElevatedButton(
onPressed: tambah,
child: Text(“Tambah”),
)
],
);
}
}

Di sinilah konsep state menjadi penting. State adalah data yang dapat berubah selama aplikasi berjalan. Ketika method setState() dipanggil, Flutter akan melakukan rebuild pada widget tersebut sehingga UI diperbarui sesuai nilai terbaru.

Karena Flutter menggunakan bahasa Dart yang mendukung konsep object-oriented dan null safety, pengelolaan state menjadi lebih terstruktur dan aman dari error.

Perbedaan utama antara StatelessWidget dan StatefulWidget dapat diringkas sebagai berikut:

StatelessWidget:

  • Tidak memiliki state internal yang berubah
  • Lebih ringan
  • Cocok untuk UI statis
  • Tidak menggunakan setState()

StatefulWidget:

  • Memiliki state yang bisa berubah
  • Digunakan untuk UI dinamis
  • Menggunakan setState() untuk memicu rebuild
  • Memiliki lifecycle tambahan

Berbicara mengenai lifecycle, StatefulWidget memiliki beberapa method penting seperti initState(), dispose(), dan didChangeDependencies(). Method ini sering digunakan untuk inisialisasi data, memanggil API, atau membersihkan resource seperti controller.

Contoh penggunaan initState():

@override
void initState() {
super.initState();
print("Widget pertama kali dibuat");
}

Pemahaman lifecycle ini menjadi sangat penting ketika aplikasi mulai berinteraksi dengan database, API, atau animation controller.

Salah satu kesalahan umum pemula adalah menggunakan StatefulWidget untuk semua komponen. Praktik terbaiknya adalah gunakan StatelessWidget sebanyak mungkin, dan gunakan StatefulWidget hanya ketika benar-benar membutuhkan state. Pendekatan ini akan membuat aplikasi lebih efisien dan mudah dirawat.

Seiring berkembangnya aplikasi, manajemen state sederhana dengan setState() mungkin tidak lagi cukup. Di tahap itulah developer mulai menggunakan pendekatan state management seperti Provider, Riverpod, atau Bloc. Namun sebelum masuk ke sana, pemahaman dasar mengenai StatefulWidget adalah prasyarat mutlak.

Secara arsitektural, memahami widget berarti memahami bagaimana Flutter membangun ulang UI berdasarkan perubahan data. Setiap kali state berubah, Flutter membangun ulang bagian widget tree yang terdampak, bukan seluruh aplikasi. Inilah yang membuat performa Flutter tetap optimal meskipun bersifat reactive.

Dengan memahami perbedaan StatelessWidget dan StatefulWidget secara konseptual dan teknis, kamu kini memiliki fondasi kuat untuk membangun UI dinamis di Flutter. Pada artikel berikutnya, kita akan masuk ke praktik membuat aplikasi Flutter pertama secara lebih mendalam dengan studi kasus counter app dan penjelasan arsitektur di baliknya.