Flutter: Stateless vs Stateful Widget – Apa Bedanya?

Flutter punya dua jenis widget utama: Stateless dan Stateful.
Memahami perbedaannya penting karena hampir semua aplikasi Flutter dibangun dari dua tipe ini.

Apa itu Stateless Widget?

StatelessWidget adalah widget yang tidak memiliki state (keadaan) yang bisa berubah setelah widget dibuat.
Artinya, tampilannya tetap sama kecuali dipengaruhi oleh input dari luar (parameter).

Contoh penggunaan:

• Text statis

• Icon

• Tampilan UI yang tidak berubah

Contoh Kode

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  const MyStatelessWidget({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const Center(
        child: Text("Ini Stateless Widget"),
      ),
    );
  }
}

Apa itu Stateful Widget?

StatefulWidget adalah widget yang memiliki state (keadaan) yang bisa berubah saat aplikasi berjalan.
Jika state berubah, Flutter akan rebuild bagian widget tersebut.

Contoh penggunaan:

• Counter yang bertambah saat tombol ditekan

• Form input

• Animasi

Contoh Kode

import 'package:flutter/material.dart';

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void _increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Stateful Widget")),
      body: Center(
        child: Text(
          'Counter: $counter',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Kapan Menggunakan?

• Gunakan StatelessWidget jika tampilan tidak perlu berubah setelah dibuat.

• Gunakan StatefulWidget jika tampilan bergantung pada interaksi user atau data yang berubah.

Kesimpulan

• StatelessWidget → untuk tampilan statis.

• StatefulWidget → untuk tampilan dinamis dengan state yang bisa berubah.

• Keduanya adalah fondasi utama membangun UI di Flutter.

Dengan memahami perbedaan ini, kamu bisa memilih tipe widget yang sesuai untuk kebutuhan aplikasi.