StatefulWidget & setState — CompileDaily Study

Penjelasan

StatelessWidget (dipakai di materi sebelumnya) tidak punya state internal — untuk widget yang datanya BERUBAH seiring waktu (mis. hasil klik tombol), dipakai StatefulWidget, dipasangkan dengan class State terpisah. Memanggil setState(() { ... }) memberi tahu Flutter untuk MERENDER ULANG widget itu dengan data terbaru.

Contoh Konsep

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

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

class _CounterState extends State<Counter> {
    int jumlah = 0;

    void tambah() {
        setState(() {
            jumlah++;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Jumlah: $jumlah'),
                ElevatedButton(onPressed: tambah, child: const Text('Tambah')),
            ],
        );
    }
}

Praktikum

Buat StatefulWidget SaklarLampu dengan state boolean nyala (awalnya false). Buat method toggle() yang membalik nilainya lewat setState(). Tampilkan teks "Lampu Nyala" atau "Lampu Mati" sesuai state.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Perubahan properti state HARUS dilakukan DI DALAM callback setState(() { ... }) — mengubah properti langsung TANPA setState() (mis. jumlah++ saja tanpa dibungkus) memang mengubah nilainya di memori, tapi Flutter TIDAK TAHU harus merender ulang widget-nya, jadi perubahan itu tidak akan terlihat di layar.