Dalam pengembangan aplikasi Flutter, state management (pengelolaan status) adalah salah satu konsep terpenting.
“State” atau “keadaan” menggambarkan data atau kondisi yang bisa berubah seiring interaksi pengguna seperti jumlah klik, teks input, atau status login.
Salah satu cara termudah dan paling dasar untuk mengelola state di Flutter adalah dengan menggunakan StatefulWidget.
Apa itu StatefulWidget?
StatefulWidget ini merupakan sebuah jenis widget di Flutter yang bisa berubah saat aplikasi sedang berjalan. Misalnya, ketika kita menakan tombol, menambah nilai counter, atau mengubah warna, tampilan semua itu memerlukan widget yang bisa memperbarui dirinya.
Berbeda dengan StateleesWidget, yang hanya menampilkan tampilan statis dan tidak dapat berbah setelah dibangun ulang, StatefulWidget memiliki class state yang bisa diperbarui menggunakan metode setState().
Struktur Dasar StatefulWidget
Sebuah StatefulWidget terdiri dari dua bagian utama:
- Class utama (
StatefulWidget) – mendefinisikan struktur dasar widget. - Class state (
State) – menyimpan data (state) dan logika untuk memperbarui tampilan.
Contohnya:
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _increment() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('$_counter'),
),
floatingActionButton: FloatingActionButton(
onPressed: _increment,
child: const Icon(Icons.add),
),
);
}
}
Contoh Lengkap Aplikasi Counter.
Berikut contoh aplikasi flutter lengkap menggunakan StatefulWidget untuk mengelola state sederhana, biasa kita waktu buat projek baru di flutter.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _increment() {
setState(() {
_counter++;
});
}
void _decrement() {
setState(() {
_counter--;
});
}
void _reset() {
setState(() {
_counter = 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('StatefulWidget Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pressed the button this many times:',
style: TextStyle(fontSize: 16),
),
Text(
'$_counter',
style: const TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _decrement,
child: const Icon(Icons.remove),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: _reset,
child: const Icon(Icons.refresh),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: _increment,
child: const Icon(Icons.add),
),
],
),
],
),
),
);
}
}
Cara kerja dari setState() ini, memberitahu Flutter bahwa ada perubahan data yang memperngaruhi tampilan. Ketika setState() dipanggil:
- Nilai variable yang berada di daam state ini berubah
- Futter menjalankan ulang metode build().
- Ui diperbarui dengan data terbaru.
Contoh pada kode di atas:
void _increment() {
setState(() {
_counter++;
});
}
void _decrement() {
setState(() {
_counter--;
});
}
void _reset() {
setState(() {
_counter = 0;
});
}Prinsip Penting State di StatefulWidget
State tersimpan di dalam class State, bukan di widget itu sendiri.
Jadi setiap kali widget di-rebuild, nilai di class State tetap dipertahankan.
Pisahkan logika dan UI jika aplikasi mulai kompleks.
Pada tahap ini biasanya kita mulai beralih ke state management yang lebih baik seperti Provider, Bloc, atau Riverpod.
Gunakan setState() hanya ketika data yang memengaruhi UI berubah.
Pemanggilan berlebihan akan menyebabkan performa menurun.
Kapan Kita Menggunakan StatefulWidget?
Gunakan StatefulWidget jika:
- Data di tampilan berubah secara lokal.
- Tidak perlu membagikan state ke banyak widget lain.
- Aplikasi masih sederhana (seperti counter, toggle, form input, atau animasi kecil).
Contoh kasus:
- Tombol favorit (like/unlike)
- Menampilkan atau menyembunyikan password
- Counter sederhana
- Form yang berubah ketika pengguna mengetik
Kesimpulan
StatefulWidget adalah fondasi utama dalam memahami state management di Flutter.
Dengan memahaminya, kamu akan lebih mudah memahami konsep lanjutan seperti Provider, Bloc, atau Riverpod yang digunakan untuk mengelola state secara global.
Kuncinya sederhana:
Gunakan setState() untuk memperbarui data dan biarkan Flutter me-render ulang UI dengan nilai terbaru.
