Belajar Flutter dari Awal: Manajemen State Sederhana dengan setState (Part 4)

Rifqi An Rifqi An
•
Februari 25, 2026


Manajemen State Sederhana dengan setState (Part 4): Selamat Datang Kembali di Jagat Per-Flutter-an!

Halo, gaes! Balik lagi nih sama seri tutorial kita, "Belajar Flutter dari Awal." Gimana kabar ngoding kalian? Masih semangat kan? Atau malah udah keburu pusing sama yang namanya state management? Tenang, kalian gak sendirian kok! Di part ke-4 ini, kita bakal kupas tuntas salah satu jurus paling fundamental di Flutter buat ngatur-ngatur data alias state: si setState.

Anggap aja ini pemanasan sebelum kita nyelam lebih dalam ke samudra state management yang lebih kompleks. Tapi jangan salah, meskipun kelihatan sederhana, setState ini tulang punggungnya aplikasi-aplikasi Flutter yang pake StatefulWidget, lho!

Daftar Isi

State Itu Apa Sih, Bro? (Nggak Bosen-bosennya Ngulang)

Oke, kita ulang lagi dikit ya biar pada inget. Dalam konteks Flutter, state itu basically data yang bisa berubah seiring waktu dan bisa mempengaruhi tampilan UI aplikasi kita. Contohnya: nilai counter, status loading, data yang udah di-fetch dari API, status toggle (on/off), dan lain-lain. Ibaratnya, state itu kondisi terkini dari aplikasi kita.

Kalau kita punya widget yang tampilannya perlu berubah berdasarkan perubahan data ini, maka kita perlu yang namanya StatefulWidget, yang punya state di dalamnya. Nah, gimana caranya si StatefulWidget ini tau kalau datanya berubah dan harus rebuild UI-nya? Jawabannya ada di si setState!

Kenapa Harus Pake setState? (Emangnya Gak Bisa Langsung Ganti Aja?)

Ini nih pertanyaan sejuta umat programmer pemula. "Kan tinggal ganti aja variabelnya, bang! Misal int counter = 0; terus jadi counter = 1;. Gampang kan?"

Eits, gak semudah itu, ferguso! Kamu bisa aja mengubah nilai variabel, tapi Flutter itu gak langsung tau kalau kamu udah mengubahnya. Dia gak punya mata batin buat mendeteksi perubahan itu secara otomatis. Hasilnya? Variabelnya udah berubah, tapi tampilan UI-nya masih jadul alias gak ke-update. Rasanya kayak udah bayar tapi barangnya gak dikirim, sebel kan?

Nah, setState ini ibaratnya "telepon darurat" buat Flutter. Ketika kamu manggil setState(() { ... });, kamu lagi bilang ke Flutter, "WOY! ADA PERUBAHAN DATA NIH! TOLONG RENDER ULANG BAGIAN INI YA!". Dan si Flutter pun dengan patuh akan melakukan tugasnya, yaitu memanggil metode build() lagi untuk widget terkait dan semua child widget-nya, sehingga tampilan UI-nya jadi fresh sesuai data terbaru.

Membongkar Cara Kerja setState: Sulap Dibalik Layar!

Secara sederhana, begini nih cara kerja setState:

  1. Kamu mengubah nilai state (variabel) di dalam closure setState(() { ... });.
  2. Setelah closure selesai dieksekusi, setState memberi tahu Flutter framework bahwa state dari objek State telah berubah.
  3. Flutter kemudian menjadwalkan widget untuk di-rebuild.
  4. Pada frame berikutnya, metode build() dari StatefulWidget itu akan dipanggil ulang.
  5. Tampilan UI diperbarui sesuai dengan nilai state yang baru.

Gampang kan? Kayak sulap, tapi pakai logika ngoding!

Studi Kasus 1: Aplikasi Counter Sederhana (Si Klasik!)

Oke, kita langsung praktik aja biar gak kebanyakan teori. Ini dia contoh aplikasi counter paling dasar yang sering banget jadi contoh pertama buat belajar setState. Jangan di-copas doang ya, coba ketik sendiri biar otaknya juga ikut ngoding!

Anggap aja ini bagian dari _MyHomePageState dari aplikasi Flutter default:


import 'package:flutter/material.dart';

class MyCounterPage extends StatefulWidget {
  const MyCounterPage({super.key, required this.title});
  final String title;

  @override
  State<MyCounterPage> createState() => _MyCounterPageState();
}

class _MyCounterPageState extends State<MyCounterPage> {
  int _counter = 0; // Ini state kita, bro!

  void _incrementCounter() {
    setState(() {
      // Di sinilah keajaiban setState terjadi!
      // Kita mengubah nilai _counter
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Kamu sudah nge-klik tombol ini sebanyak:',
            ),
            Text(
              '$_counter', // Menampilkan nilai state
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // Panggil fungsi yang ada setState-nya
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Perhatikan baik-baik: setiap kali tombol FloatingActionButton diklik, fungsi _incrementCounter() akan terpanggil. Di dalam fungsi itu, kita memanggil setState(() { _counter++; });. Tanpa setState, nilai _counter akan bertambah di belakang layar, tapi tampilan di Text('$_counter') gak akan berubah. Dijamin bete deh!

Studi Kasus 2: Nambah Fitur Toggle (Biar Gak Itu-itu Aja!)

Sekarang kita coba bikin yang sedikit lebih kompleks. Misalnya kita mau ada tombol yang bisa nge-toggle teks, dari "ON" jadi "OFF" atau sebaliknya. Mirip saklar lampu gitu deh. Ini juga pake setState!


import 'package:flutter/material.dart';

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

  @override
  State<TogglePage> createState() => _TogglePageState();
}

class _TogglePageState extends State<TogglePage> {
  bool _isLightOn = false; // State untuk status lampu

  void _toggleLight() {
    setState(() {
      _isLightOn = !_isLightOn; // Balik nilai boolean
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Toggle Sederhana'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              _isLightOn ? Icons.lightbulb_sharp : Icons.lightbulb_outline,
              color: _isLightOn ? Colors.yellow[700] : Colors.grey,
              size: 100.0,
            ),
            const SizedBox(height: 20),
            Text(
              _isLightOn ? 'Lampu Menyala!' : 'Lampu Mati.',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: _isLightOn ? Colors.blueAccent : Colors.redAccent,
              ),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: _toggleLight,
              child: Text(_isLightOn ? 'Matikan Lampu' : 'Nyalakan Lampu'),
            ),
          ],
        ),
      ),
    );
  }
}

Di contoh ini, kita punya _isLightOn yang merupakan boolean state. Setiap kali tombol ElevatedButton diklik, fungsi _toggleLight() akan mengubah nilai _isLightOn menjadi kebalikannya dan memanggil setState. Otomatis, ikon lampu dan teksnya akan berubah di UI. Keren, kan?

Kapan setState Jadi Hero, Kapan Jadi Beban?

setState ini memang sangat berguna dan powerful untuk state management sederhana dalam satu StatefulWidget. Untuk kasus-kasus seperti counter, toggle, atau menampilkan data hasil inputan dari satu form, setState adalah pilihan yang tepat dan paling efisien.

Tapi, ada tapinya nih. setState juga punya batasan. Kalau aplikasi kamu udah mulai gede, dengan banyak widget yang saling bergantung pada satu state, atau state-nya perlu diakses dari banyak layar berbeda, setState bisa jadi agak ribet dan bikin pusing tujuh keliling:

  • Prop Drilling: Kamu harus terus-terusan ngoper data dari parent ke child, ke cucu, ke cicit. Capek kan? Kayak estafet bendera tapi gak nyampe-nyampe.
  • Performance Issue: Setiap setState dipanggil, dia akan me-rebuild seluruh StatefulWidget dan semua child-nya. Kalau ada perubahan kecil di satu tempat tapi yang di-rebuild banyak banget, bisa jadi boros resource dan bikin aplikasi lemot. Ini sering jadi biang kerok kenapa aplikasi jadi laggy, apalagi pas lagi demo ke klien. Duh!
  • Code Complexity: Logika state management jadi tersebar di mana-mana dan susah dilacak. Debugging jadi horor, kayak nyari jarum dalam tumpukan jerami. Pernah kan ngalamin bug yang munculnya cuma pas lagi ngopi dan mata udah blur? Itu semua gara-gara manajemen state yang amburadul!

Nah, di sinilah kita mulai butuh solusi state management yang lebih canggih kayak Provider, BLoC, GetX, Riverpod, dan kawan-kawan. Tapi itu nanti ya, di part-part selanjutnya! Sekarang fokus dulu sama setState karena ini fundamental banget.

Latihan: Misi Penyelamatan Kucing Gak Jelas!

Biar materi ini gak cuma lewat doang, yuk kita coba latihan ngoding yang sedikit "gak jelas" tapi lucu. Anggap aja ini pelampiasan rasa frustasi ngoding yang sering bikin kita pengen teriak.

Skenario: Kamu diminta bikin aplikasi Flutter sederhana yang bisa ngasih makan kucing. Setiap kali tombol "Beri Makan" diklik, ada beberapa hal yang harus terjadi:

  1. Jumlah makanan yang tersisa berkurang 1.
  2. Kalau makanan masih ada, tampilkan pesan: "Kucingmu kenyang <3 Sisa makanan: X".
  3. Kalau makanan udah habis (jumlahnya 0), tampilkan pesan: "Maaf, makanan kucing habis! Kucingmu lapar T_T" dan tombol "Beri Makan" harus jadi disabled (tidak bisa diklik).
  4. Tambahkan juga tombol "Beli Makanan Baru" yang bisa nge-reset jumlah makanan jadi 5 lagi.

Gimana? Lumayan menantang tapi seru kan? Gunakan setState untuk mengelola jumlah makanan dan status tombolnya ya! Anggap aja kamu lagi menyelamatkan nyawa kucing virtual yang kelaparan.

Selamat mencoba, para programmer tangguh! Kalau ada bug atau error, jangan panik. Itu berarti kamu lagi belajar. Siapkan kopi dan kuatkan mental! Sampai jumpa di part berikutnya yang mungkin akan membahas dasar-dasar state management yang lebih "serius"!

Bagikan Artikel Ini