Flutter Mobile Development • Kelas 10 • Semester 1
8 Topik utama dalam perjalanan State Management
Widget tanpa perubahan — Slide 4
Widget yang bisa berubah — Slide 5
Memicu update UI — Slide 7
initState, build, dispose — Slide 8-11
Sumber data tunggal — Slide 12
Aliran data top-down — Slide 13
Kapan UI digambar ulang — Slide 14
Counter App Advanced — Slide 15-19
Warna lampu yang sedang menyala adalah STATE. Ketika waktu habis (event), state berubah → tampilan ikut berubah. Perhatikan lampu di samping berganti otomatis!
Definisi: State adalah DATA yang bisa BERUBAH, yang mempengaruhi tampilan UI sebuah widget di Flutter.
"UI adalah cerminan dari State saat ini."
Foto dalam bingkai di dinding tidak bisa berubah sendiri. Kamu menekannya — tidak terjadi apa-apa. Stateless widget sama: tampilannya tetap, hanya bergantung pada data yang diberikan dari luar.
class KartuNama extends StatelessWidget {
final String nama;
final String kelas;
const KartuNama({
Key? key,
required this.nama,
required this.kelas,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
Text(nama, style: TextStyle(fontSize: 24)),
Text(kelas, style: TextStyle(color: Colors.grey)),
],
),
);
}
}↑ Tampilan tetap, tidak berubah
Tekan tombol volume + maka angka volume naik; ganti channel maka tampilan berubah. Menekan remote = mengubah STATE → tampilan ikut berubah. Coba demo di bawah!
class KartuDigital extends StatefulWidget {
const KartuDigital({Key? key}) : super(key: key);
@override
State<KartuDigital> createState() => _KartuDigitalState();
}
class _KartuDigitalState extends State<KartuDigital> {
int jumlahKlik = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Diklik: $jumlahKlik kali'),
ElevatedButton(
onPressed: () => setState(() => jumlahKlik++),
child: Text('Klik Saya!'),
),
],
);
}
}↑ Simulasi setState — angka berubah
| Aspek | Stateless | Stateful |
|---|---|---|
| State Internal | ✗ Tidak Ada | ✓ Ada |
| Perubahan UI | ✗ Tidak Bisa | ✓ Bisa |
| Lifecycle | Sederhana | Lengkap |
| Performa | Lebih Ringan | Lebih Berat |
| Contoh | Teks, Ikon, Logo | Counter, Form |
Guru menghapus angka lama lalu menulis angka baru. setState() = menghapus tampilan lama dan menggambar ulang. Klik tombol untuk mencoba!
// ❌ SALAH — tidak akan update UI
void tambahNilai() {
nilai++; // Tidak pakai setState!
}
// ✓ BENAR — UI akan update
void tambahNilai() {
setState(() {
nilai++; // Di dalam setState
});
}🥚 Lahir (createState) → 👶 Bayi (initState) → 🧒 Tumbuh (build) → 🔄 Aktivitas (setState + rebuild) → 🧓 Tua (didUpdateWidget) → 💀 Selesai (dispose)
| Method | Kapan Dipanggil | Berapa Kali |
|---|---|---|
| initState() | Saat widget pertama dibuat | 1× |
| build() | Setiap state berubah | Banyak |
| dispose() | Saat widget dihapus | 1× |
Sebelum memasak, chef menyiapkan bahan, pisau, dan kompor terlebih dahulu. initState() = semua persiapan sebelum widget tampil.
class _ProfilState extends State<Profil> {
late TextEditingController _namaController;
List<String> daftarItem = [];
@override
void initState() {
super.initState(); // WAJIB baris pertama!
_namaController = TextEditingController();
_loadDataDariServer();
print('initState dipanggil! Hanya 1 kali.');
}
Future<void> _loadDataDariServer() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
daftarItem = ['Item 1', 'Item 2', 'Item 3'];
});
}
}Setiap kali state berubah, kanvas dihapus dan dilukis ulang. build() = melukis ulang UI setiap kali state berubah.
@override
Widget build(BuildContext context) {
// ❌ JANGAN: await fetchDataDariServer();
// ✓ BENAR — hanya UI logic
return Scaffold(
appBar: AppBar(title: Text('Halaman Saya')),
body: Center(
child: Column(
children: [
Text('Nilai: $nilai'),
ElevatedButton(
onPressed: () => setState(() => nilai++),
child: Text('Tambah'),
),
],
),
),
);
}Karyawan merapikan meja, menutup laptop, mematikan lampu. Jika tidak dibersihkan = memory leak (seperti listrik terus menyala).
class _FormState extends State<FormWidget> {
late TextEditingController _namaController;
late AnimationController _animController;
@override
void initState() {
super.initState();
_namaController = TextEditingController();
_animController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
);
}
@override
void dispose() {
_namaController.dispose();
_animController.dispose();
super.dispose(); // WAJIB di baris terakhir
}
}Admin update stok di Gudang → Website otomatis update tampilan → Pelanggan selalu lihat data terbaru. Gudang = Single Source of Truth.
Satu tempat data disimpan
Data mengalir SATU arah
UI otomatis update saat data berubah
Air mengalir dari Desa A (parent) → Desa B (child) → Desa C (grandchild). Air tidak bisa mengalir ke atas! Data di Flutter mengalir TOP-DOWN (Parent → Child).
Passing data turun (parent → child)
Passing kejadian naik (child → parent)
Akses banyak widget sekaligus
class _ParentWidgetState extends State<ParentWidget> {
int _nilai = 0;
void _tambahNilai() => setState(() => _nilai++);
@override
Widget build(BuildContext context) {
return ChildWidget(
nilai: _nilai, // Passing data DOWN
onTambah: _tambahNilai, // Callback UP
);
}
}
class ChildWidget extends StatelessWidget {
final int nilai;
final VoidCallback onTambah;
const ChildWidget({required this.nilai, required this.onTambah});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Nilai: $nilai'),
ElevatedButton(onPressed: onTambah, child: Text('Tambah')),
],
);
}
}Admin update pengumuman → papan dicetak ulang. setState() = perintah cetak ulang papan pengumuman.
// ✓ LEBIH EFISIEN — gunakan const untuk widget tetap
Widget _buildJudul() => const Text('Halaman Utama'); // const!Timeline Pengerjaan: Slide 15 (intro) → 16 (struktur) → 17 (logic) → 18 (UI) → 19 (demo interaktif)
int _counter = 0; // Nilai counter saat ini
int _maxValue = 10; // Batas maksimum
List<String> _history = []; // Riwayat perubahan
Color _bgColor = Colors.blue; // Warna dinamisimport 'package:flutter/material.dart';
class CounterApp extends StatefulWidget {
const CounterApp({Key? key}) : super(key: key);
@override
State<CounterApp> createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
int _counter = 0;
final int _maxValue = 10;
final int _minValue = 0;
final List<String> _history = [];
Color _bgColor = Colors.blue.shade700;
@override
void initState() {
super.initState();
_history.add('App dimulai. Counter = 0');
}
void _increment() {
if (_counter < _maxValue) {
setState(() {
_counter++;
_updateColor();
_history.add('Ditambah → Counter = $_counter');
});
}
}
void _decrement() {
if (_counter > _minValue) {
setState(() {
_counter--;
_updateColor();
_history.add('Dikurangi → Counter = $_counter');
});
}
}
void _reset() {
setState(() {
_counter = 0;
_bgColor = Colors.blue.shade700;
_history.add('--- Reset! Counter = 0 ---');
});
}
void _updateColor() {
if (_counter >= 8) {
_bgColor = Colors.red.shade700;
} else if (_counter >= 5) {
_bgColor = Colors.orange.shade700;
} else {
_bgColor = Colors.blue.shade700;
}
}
@override
void dispose() {
_history.clear();
super.dispose();
} @override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: _bgColor,
appBar: AppBar(
title: const Text('Counter Advanced'),
backgroundColor: Colors.transparent,
),
body: Column(
children: [
Expanded(
flex: 2,
child: Center(
child: AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: Text(
'$_counter',
key: ValueKey<int>(_counter),
style: TextStyle(
fontSize: 120,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: LinearProgressIndicator(
value: _counter / _maxValue,
backgroundColor: Colors.white30,
valueColor: AlwaysStoppedAnimation(Colors.white),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FloatingActionButton(
onPressed: _decrement,
child: Icon(Icons.remove),
),
FloatingActionButton(
onPressed: _reset,
child: Icon(Icons.refresh),
),
FloatingActionButton(
onPressed: _increment,
child: Icon(Icons.add),
),
],
),
Expanded(
flex: 1,
child: ListView.builder(
itemCount: _history.length,
itemBuilder: (ctx, i) => ListTile(
title: Text(_history[i]),
),
),
),
],
),
);
}
}Animasi transisi saat angka berganti
Bar progres counter / maxValue
Memberitahu Flutter widget berubah
Coba tombol −, reset, dan + di bawah ini! (maks 10, min 0)
Gunakan StatefulWidget ketika widget perlu berubah
Selalu gunakan setState() untuk update state
Jangan lupa dispose() resource dari initState()
🎉 BAB 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 9 ✓ SELESAI!
Pilih jenis widget yang paling tepat, lalu periksa jawaban
Isi bagian ___ agar Counter bekerja
class _SimpleCounterState extends ___<SimpleCounter> {
int _nilai = 0;
@override
void ___() {
super.initState();
print('Counter dimulai!');
}
void _tambah() {
___(() {
_nilai++;
});
}
@override
Widget ___(___ context) {
return Column(
children: [
Text('Nilai: $_nilai'),
ElevatedButton(
onPressed: ___,
child: Text('Tambah'),
),
],
);
}
@override
void ___() {
print('Widget dihancurkan!');
super.dispose();
}
}State <SimpleCounter>initStatesetStatebuild ( BuildContext context )_tambah (callback onPressed)dispose| Kriteria | Poin |
|---|---|
| State variables benar & lengkap | 25 |
| setState() digunakan dengan benar | 25 |
| UI berubah sesuai state | 25 |
| Validasi (tidak bisa < 0) | 15 |
| Kode rapi & ada komentar | 10 |
List<Map> produk = []; // daftar produk
List<Map> keranjang = []; // isi keranjang
int totalItem = 0; // jumlah item
int totalHarga = 0; // total harga (realtime)