StatefulWidget & setState

Tampilan yang bisa berubah

Widget stateless selalu menampilkan hal yang sama. Tetapi aplikasi nyata berubah: angka bertambah, kotak centang tercentang, daftar bertambah. Data yang bisa berubah itu disebut state (keadaan). Widget yang menyimpannya adalah StatefulWidget.

Dua class untuk satu widget

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

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _hitung = 0;                 // ini STATE

  void _tambah() {
    setState(() {
      _hitung++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('$_hitung', style: const TextStyle(fontSize: 48)),
        ElevatedButton(onPressed: _tambah, child: const Text('Tambah')),
      ],
    );
  }
}

• Class pertama (Counter) hanya "kartu identitas" widget. Ia membuat class kedua lewat createState().
• Class kedua (_CounterState) menyimpan data yang berubah (_hitung) dan memiliki build(). Tanda garis bawah _ di depan nama berarti privat (hanya dipakai di berkas ini).
• Field state tidak final karena nilainya memang berubah.

setState: kunci dari semuanya

Mengubah variabel saja tidak memperbarui layar. Kamu harus memberi tahu Flutter dengan setState:

setState(() {
  _hitung++;     // ubah data di dalam sini
});

Alurnya: (1) pengguna menekan tombol, (2) setState mengubah data, (3) Flutter memanggil build() lagi, (4) layar menampilkan angka baru. Hanya bagian yang berubah yang benar-benar digambar ulang, jadi tetap cepat.

_tambah tanpa kurung

Di onPressed: _tambah, kita menyerahkan function-nya (dijalankan nanti saat ditekan). Menulis _tambah() akan menjalankannya saat tampilan dibuat — kesalahan yang sering terjadi.

Stateless atau Stateful?

Mulailah dengan Stateless. Ubah menjadi Stateful hanya jika widget itu perlu mengingat sesuatu yang berubah.