StatelessWidget dan StatefulWidget di Flutter

Tue, March 2025 01:46:41

Flutter adalah framework yang sangat powerful untuk membangun aplikasi mobile, web, dan desktop dengan satu codebase. Salah satu konsep fundamental yang harus dikuasai saat belajar Flutter adalah memahami perbedaan dan penggunaan StatelessWidget dan StatefulWidget.

Dalam artikel ini, kita akan membahas secara mendalam kedua jenis widget ini, bagaimana cara menggunakannya, serta kapan harus memilih satu dibanding yang lain.

1. Apa itu Widget di Flutter?

Flutter membangun UI menggunakan widget. Setiap elemen pada layar, seperti teks, tombol, gambar, hingga struktur layout, semuanya adalah widget. Widget bisa diibaratkan sebagai "blok bangunan" aplikasi.

Widget di Flutter bersifat deklaratif, artinya kita mendefinisikan UI berdasarkan state (keadaan). Saat state berubah, UI akan rebuild (dibangun ulang) untuk mencerminkan perubahan tersebut.

Jenis Widget di Flutter

Flutter memiliki dua jenis widget utama:

• StatelessWidget – Widget yang tidak berubah (statis).
• StatefulWidget – Widget yang bisa berubah (dinamis).

Mari kita bedah satu per satu!

2. StatelessWidget: Widget Statis

StatelessWidget adalah widget yang tidak memiliki state yang bisa berubah setelah widget dibuat. UI-nya tetap sama sepanjang waktu.

Contoh umum: teks, ikon, dan gambar yang hanya ditampilkan tanpa interaksi.

Contoh StatelessWidget

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stateless Widget')),
      body: Center(
        child: Text(
          'Halo, Saya StatelessWidget!',
          style: TextStyle(fontSize: 24, color: Colors.blue),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatelessWidget()));

Penjelasan:

• StatelessWidget mewarisi dari class StatelessWidget.
• build() adalah method wajib yang membangun UI widget.
• UI hanya akan dirender sekali, dan tidak akan diubah meskipun ada event atau interaksi.

Kapan Menggunakan StatelessWidget?

Gunakan StatelessWidget ketika:

• Konten bersifat statis dan tidak akan berubah.
• Data yang ditampilkan bersifat final atau diambil dari sumber eksternal sekali saja.
• Elemen UI hanya untuk tampilan visual tanpa interaksi yang mempengaruhi state.

Contoh penggunaan:

• Teks statis
• Logo aplikasi
• Icon navigasi
• Layout dasar

3. StatefulWidget: Widget Dinamis

StatefulWidget adalah widget yang memiliki state dan dapat berubah selama masa hidupnya.

State adalah data yang bisa berubah seiring waktu, misalnya:

• Angka yang bertambah saat tombol ditekan.
• Form yang berubah saat diisi.
• Animasi yang bergerak.

Struktur StatefulWidget

StatefulWidget terdiri dari dua class:

1. Class utama (StatefulWidget) → Bersifat immutable.
2. Class state (_State) → Tempat logika dan data yang bisa berubah.

Contoh StatefulWidget

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

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

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

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

void main() => runApp(MaterialApp(home: MyStatefulWidget()));

Penjelasan:

• Class MyStatefulWidget → Membuat widget utama.
• Class _MyStatefulWidgetState → Menangani state dan logika.
• setState() → Memberitahu Flutter bahwa state berubah, sehingga UI akan di-rebuild.

4. Perbedaan StatelessWidget vs StatefulWidget

5. Lifecycle pada StatefulWidget

StatefulWidget punya lifecycle yang lebih kompleks dibanding StatelessWidget. Berikut adalah alur hidupnya:

1. createState() → Membuat state baru.
2. initState() → Dipanggil sekali saat state pertama kali dibuat.
3. build() → Membangun UI (bisa berulang kali saat state berubah).
4. setState() → Memicu Flutter untuk rebuild UI.
5. dispose() → Membersihkan resource saat widget dihapus.

Contoh penggunaan lifecycle

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  void initState() {
    super.initState();
    print('Widget dibuat');
  }

  @override
  void dispose() {
    print('Widget dihapus');
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Stateful Widget Lifecycle'));
  }
}

6. Kesimpulan

Flutter mengandalkan dua jenis widget utama: StatelessWidget untuk UI statis dan StatefulWidget untuk UI dinamis yang bisa berubah.

• StatelessWidget lebih ringan dan cocok untuk tampilan yang tidak berubah.
• StatefulWidget fleksibel dan bisa diubah sesuai state aplikasi.

Kunci sukses membangun aplikasi Flutter yang efisien adalah memahami kapan harus menggunakan masing-masing jenis widget dan bagaimana mengelola state dengan baik.

Semoga artikel ini membantu kamu lebih memahami Flutter dengan lebih dalam. Selamat ngoding! 🚀