Setelah pelajaran ini kamu bisa menentukan widget yang memiliki state bersama, meneruskan data ke bawah lewat konstruktor, dan meneruskan perubahan ke atas lewat callback.
±13 menit
3 latihan
Diperiksa 28 Okt 2026
Latihan di pelajaran ini butuh akun gratis. Progres, kode, dan catatanmu hanya tersimpan di browser ini. Masuk untuk menyimpannya
Materi
Sering dua widget bersaudara membutuhkan data yang sama: daftar produk menambah barang, sedangkan ikon keranjang di AppBar menampilkan jumlahnya. Widget bersaudara tidak bisa membaca State satu sama lain. Pemecahannya adalah mengangkat state: data disimpan di State milik induk terdekat yang membungkus keduanya, lalu induk mengirim nilainya ke bawah lewat konstruktor dan menerima perubahan dari bawah lewat fungsi callback.
class PemilihPorsi extends StatelessWidget {
const PemilihPorsi({super.key, required this.porsi, required this.onUbah});
final int porsi;
final ValueChanged<int> onUbah; // fungsi milik induk
@override
Widget build(BuildContext context) {
return Row(children: [
IconButton(icon: const Icon(Icons.remove), onPressed: () => onUbah(porsi - 1)),
Text('$porsi porsi'),
IconButton(icon: const Icon(Icons.add), onPressed: () => onUbah(porsi + 1)),
]);
}
}
// Di State milik induk:
// PemilihPorsi(porsi: _porsi, onUbah: (n) => setState(() => _porsi = n))
Dokumentasi Flutter merumuskannya begini: pemberitahuan perubahan mengalir ke atas lewat callback, sedangkan state terkini mengalir ke bawah ke widget stateless yang menampilkannya. Anak tidak mengubah field induk; ia memanggil callback, induk memanggil setState, lalu membangun ulang anak dengan nilai baru. Bila ragu siapa pemilik state, mulai dari induk. Data pengguna, seperti centang atau posisi slider, dikelola induk; keadaan estetis seperti animasi boleh dikelola widget itu sendiri.
Latihan
0/3 lulus
Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.
Latihan 1 dari 3
Di layar toko, DaftarProduk punya tombol Tambah, dan IkonKeranjang di AppBar menampilkan jumlah barang. Keduanya anak HalamanToko. Di mana jumlah barang disimpan?
Latihan 2 dari 3
Baris onPressed mana yang menambah jumlah satu dengan benar?
class PemilihJumlah extends StatelessWidget {
const PemilihJumlah({super.key, required this.jumlah, required this.onUbah});
final int jumlah;
final ValueChanged<int> onUbah;
@override
Widget build(BuildContext context) {
return IconButton(
icon: const Icon(Icons.add),
onPressed: /* ... */,
);
}
}
Latihan 3 dari 3
Induk mula-mula mengirim total 20000, lalu memanggil setState dan membangun ulang RingkasanBayar dengan total 35000. Apa yang tampil?
class RingkasanBayar extends StatefulWidget {
const RingkasanBayar({super.key, required this.total});
final int total;
@override
State<RingkasanBayar> createState() => _RingkasanBayarState();
}
class _RingkasanBayarState extends State<RingkasanBayar> {
late int _total;
@override
void initState() {
super.initState();
_total = widget.total;
}
@override
Widget build(BuildContext context) => Text('Total: Rp$_total');
}
