Mengenal Widget di Flutter: Stateless vs Stateful

Kalau kamu baru mulai belajar Flutter, salah satu konsep paling dasar yang harus dipahami adalah widget. Semua yang terlihat di layar Flutter—mulai dari tombol, teks, hingga layout kompleks—dibuat menggunakan widget. Widget sendiri dibagi menjadi dua jenis utama: Stateless dan Stateful. Artikel ini akan membahas perbedaan keduanya dan bagaimana cara menggunakannya.

Apa Itu Stateless Widget?

Stateless Widget adalah widget yang tidak menyimpan atau mengubah data internal setelah dibuat. Jadi, tampilannya tetap sama selama widget tersebut hidup. Cocok untuk elemen UI yang bersifat statis, misalnya judul halaman, ikon, atau tombol yang tampilannya tidak berubah.

Contoh Stateless Widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Contoh Stateless Widget')),
        body: Center(
          child: Text('Halo, ini Stateless Widget!'),
        ),
      ),
    );
  }
}

Pada contoh di atas, teks tidak berubah. Stateless widget cocok untuk tampilan yang bersifat “tetap”.

Apa Itu Stateful Widget?

Stateful Widget adalah widget yang memiliki state atau data internal yang bisa berubah saat aplikasi berjalan. Misalnya tombol like yang bisa menambah jumlah hitungan, form input, atau animasi yang berubah seiring waktu.

Contoh Stateful Widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contoh Stateful Widget')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Kamu sudah menekan tombol sebanyak:'),
            Text('$_counter', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Pada contoh ini, ketika tombol ditekan, nilai _counter bertambah dan UI otomatis diperbarui. Itu adalah fitur utama Stateful Widget.

Perbedaan Utama Stateless vs Stateful

• Stateless: Tidak menyimpan state internal, tampilan tetap sama.
• Stateful: Menyimpan state internal, UI bisa berubah sesuai data.
• Penggunaan: Stateless untuk tampilan tetap, Stateful untuk elemen interaktif atau dinamis.
• Performa: Stateless lebih ringan karena tidak perlu memantau perubahan state.

Kapan Harus Pakai Stateful Widget?

Gunakan Stateful Widget saat kamu butuh:

• UI yang berubah berdasarkan input pengguna.
• Data yang diperoleh dari API dan perlu di-refresh.
• Animasi atau efek visual yang berubah seiring waktu.

Kesimpulan

Mengenal perbedaan Stateless dan Stateful Widget adalah langkah pertama supaya bisa bikin aplikasi Flutter yang interaktif dan efisien. Gunakan Stateless untuk elemen statis dan Stateful untuk elemen yang membutuhkan interaksi atau update data. Dengan memahami konsep ini, kamu bisa mulai membangun UI Flutter yang lebih kompleks dan dinamis dengan percaya diri.