Membedakan StatelessWidget dan StatefulWidget: Kapan Pakai yang Mana?

Membedakan StatelessWidget dan StatefulWidget: Kapan Pakai yang Mana?

Ringkasan

Memahami kapan sebuah halaman bersifat statis dan kapan harus dinamis merespons input.

Apa Itu Widget di Flutter?

Di dalam Flutter, hampir semua komponen visual adalah Widget. Mulai dari teks sederhana, tombol, gambar, hingga tata letak halaman itu sendiri. Namun, sebelum Anda mulai menulis kode, ada satu keputusan krusial yang harus diambil: apakah widget ini perlu berubah seiring berjalannya waktu, atau cukup diam saja?

Di sinilah kita mengenal dua jenis widget utama: StatelessWidget dan StatefulWidget.

1. StatelessWidget (Statik / Diam)

StatelessWidget adalah widget yang tidak memiliki keadaan (state) yang dapat berubah. Artinya, apa pun yang digambar pertama kali di layar akan tetap seperti itu selamanya, kecuali ada pembangunan ulang (rebuild) dari widget induknya.

• Kapan Menggunakannya?

  • Menampilkan teks judul atau deskripsi statis.

  • Menampilkan ikon atau logo aplikasi.

  • Kartu profil atau kartu informasi yang datanya tetap (tidak interaktif).

• Contoh Sederhana:

class KotakTeks extends StatelessWidget {
  const KotakTeks({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Halo, teks ini tidak akan pernah berubah!');
  }
}

2. StatefulWidget (Dinamik / Berubah-ubah)

StatefulWidget adalah widget yang dapat melacak dan mengubah keadaannya (state) secara dinamis sebagai respons terhadap interaksi pengguna, data dari internet, atau waktu.

Ketika ada data yang berubah (misalnya tombol ditekan, angka bertambah, atau teks diubah), widget ini akan memanggil fungsi setState() untuk memperbarui tampilan di layar seketika.

• Kapan Menggunakannya?

  • Tombol Like yang berubah warna saat ditekan.

  • Formulir login atau kolom pencarian teks.

  • Aplikasi Todo List tempat item bisa ditambah atau dihapus.

  • Indikator loading atau animasi bergerak.

• Contoh Sederhana:

class TombolHitung extends StatefulWidget {
  const TombolHitung({super.key});

  @override
  State<TombolHitung> createState() => _TombolHitungState();
}

class _TombolHitungState extends State<TombolHitung> {
  int jumlah = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          jumlah++; // Mengubah state saat tombol diklik
        });
      },
      child: Text('Diklik sebanyak: $jumlah kali'),
    );
  }
}

Tabel Perbandingan Cepat

Tips Memilih

Aturan Praktis: Selalu mulai dengan StatelessWidget. Jika di tengah jalan Anda menyadari bahwa komponen tersebut butuh mengingat sesuatu (seperti nilai angka, status centang, atau teks inputan), ubah komponen tersebut menjadi StatefulWidget.