StatelessWidget vs StatefulWidget

StatelessWidget: tampil sekali, tidak berubah

StatelessWidget dipakai untuk UI yang tampilannya tidak berubah setelah dibuat. Contoh: judul halaman, ikon statis, atau kartu informasi yang datanya final.

class JudulHalaman extends StatelessWidget {
  final String teks;

  const JudulHalaman({super.key, required this.teks});

  @override
  Widget build(BuildContext context) {
    return Text(
      teks,
      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

Method build dipanggil sekali (atau saat parent rebuild dengan data baru), dan tidak ada cara untuk mengubah tampilannya dari dalam.

StatefulWidget: bisa berubah lewat setState

StatefulWidget dipakai saat UI perlu bereaksi terhadap perubahan, misalnya counter, form input, atau toggle. Ia terdiri dari dua class: widget-nya sendiri dan class State yang menyimpan data yang bisa berubah.

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

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _angka = 0;

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

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

Memanggil setState menandai bahwa state berubah, lalu Flutter memanggil ulang build dan memperbarui hanya bagian layar yang berubah.

Kapan pakai yang mana?

Aturan praktisnya: mulai dari StatelessWidget. Ubah menjadi StatefulWidget hanya saat ada data yang berubah karena interaksi user atau proses asinkron di dalam widget itu sendiri. Jangan memakai stateful untuk semua hal karena setiap setState memicu rebuild, dan rebuild yang tidak perlu membuang performa.

Catatan teknis: Jangan pernah memanggil setState di dalam method build, karena build memicu setState yang memicu build lagi, dan aplikasimu akan freeze dalam loop tak berujung. Juga, perubahan variabel state di luar setState tidak akan memperbarui UI, datanya berubah tapi layarnya diam.