Membuat Tombol Beraksi: Mengubah Keadaan (State) Sederhana di Flutter

Di dunia pengembangan aplikasi dengan Flutter, kemampuan untuk merespons aksi pengguna—seperti ketukan tombol, usapan layar, atau input teks—adalah fondasi utama dari pembuatan aplikasi yang interaktif.

Artikel ini membahas cara kerja konsep State di Flutter dan cara mengubahkan tampilan aplikasi secara dinamis menggunakan metode setState.

Memahami Konsep State: Statis vs Dinamis

Sebelum menulis kode, Anda perlu memahami bagaimana Flutter memperlakukan sebuah tampilan:

• StatelessWidget: Komponen yang bersifat statis. Sekali digambar di layar, tampilannya tidak akan berubah. Cocok untuk teks judul, logo, atau latar belakang.

• StatefulWidget: Komponen yang bersifat dinamis. Tampilannya dapat berubah kapan saja berdasarkan data atau aksi tertentu (state).

State sendiri dapat diartikan sebagai "data atau informasi yang disimpan oleh aplikasi pada satu waktu tertentu." Ketika data tersebut berubah, tampilan UI harus diperbarui untuk mencerminkan perubahan tersebut.

Peran Kunci setState()

Bagaimana Flutter tahu kapan harus memperbarui tampilan? Di situlah fungsi setState() berperan.

Ketika Anda memanggil setState(), Anda memberi tahu framework Flutter:

"Data di dalam komponen ini telah berubah, tolong jalankan ulang metode build() agar tampilan layar terbarui!"

Tutorial Langkah demi Langkah

Mari buat contoh sederhana: sebuah halaman dengan tombol yang jika ditekan akan menambah angka di layar secara real-time.

1. Struktur StatefulWidget Dasar

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: TombolBeraksiScreen(),
  ));
}

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

  @override
  State<TombolBeraksiScreen> createState() => _TombolBeraksiScreenState();
}

class _TombolBeraksiScreenState extends State<TombolBeraksiScreen> {
  // 1. Variabel penampung state (data yang akan berubah)
  int _jumlahKetukan = 0;

  // 2. Fungsi logika untuk mengubah state
  void _tambahAngka() {
    setState(() {
      _jumlahKetukan++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interaksi State Sederhana'),
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Anda telah menekan tombol sebanyak:',
              style: TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 10),
            Text(
              '$_jumlahKetukan kali',
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Colors.indigo,
              ),
            ),
          ],
        ),
      ),
      // 3. Tombol aksi utama
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _tambahAngka,
        label: const Text('Tambah'),
        icon: const Icon(Icons.add),
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
    );
  }
}

Bedah Jalurnya Kode

1. Pendefinisian Variable State (_jumlahKetukan): Berada di dalam kelas _TombolBeraksiScreenState, variabel ini menyimpan data awal berupa angka 0.

2. Pemanggilan setState(): Saat FloatingActionButton ditekan, fungsi _tambahAngka dipanggil. Di dalam setState(), nilai _jumlahKetukan ditambah 1.

3. Proses Rebuild UI: Tanpa setState(), nilai variabel _jumlahKetukan di memori tetap bertambah, tetapi Flutter tidak akan menggambar ulang angka tersebut di layar. Pemanggilan setState() memicu Flutter untuk menjalankan ulang metode build(), sehingga layar menampilkan nilai terbaru.

Tips Penggunaan setState()

• Jaga kode di dalam setState() tetap ringkas: Hanya masukkan proses perubahan variabel data di dalam blok setState(). Jangan melakukan perhitungan berat atau panggilan API di dalam fungsi tersebut.

• Gunakan untuk State Lokal: setState() sangat ideal untuk interaksi sederhana dalam satu halaman (seperti form input, toggle saklar, atau penghitung angka). Untuk aplikasi berukuran besar dengan data yang dibagikan ke banyak halaman, Anda disarankan menggunakan pustaka pengelolaan state seperti Provider, Riverpod, atau Bloc.