Lompat ke konten utama
←

Flutter Dasar: Dart, Widget, dan State

Pelajaran 6 dari 18

Widget dan tata letak

Pohon widget: StatelessWidget dan StatefulWidget

Setelah pelajaran ini kamu bisa membaca pohon widget dari kode, menjelaskan bahwa widget imutabel dan build bisa dipanggil berulang, dan memilih antara StatelessWidget dan StatefulWidget.

  • ±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

Tampilan Flutter tersusun dari widget yang saling bersarang membentuk pohon. runApp menerima widget akar, misalnya MaterialApp, yang sejak Flutter 3.16 memakai gaya Material 3 secara bawaan; di dalamnya ada Scaffold, lalu Column, lalu Text, dan seterusnya. Setiap widget adalah deskripsi imutabel tentang sebagian tampilan: field-nya final, dan untuk mengubah tampilan Flutter membuat widget baru, bukan menyunting yang lama. Metode build mengubah keadaan menjadi tampilan, dan framework boleh memanggilnya kapan saja, bahkan sekali per bingkai, sehingga build harus cepat dan bebas efek samping.

class KartuMenu extends StatelessWidget {
  const KartuMenu({super.key, required this.nama, required this.harga});

  final String nama;
  final int harga;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(nama),
        trailing: Text('Rp$harga'),
      ),
    );
  }
}

StatelessWidget hanya bergantung pada nilai yang diberikan induknya, seperti KartuMenu di atas. Bila sebuah widget perlu mengingat sesuatu yang berubah karena ulah pengguna, misalnya angka penghitung atau kotak centang, pakai StatefulWidget. Ia terdiri dari dua kelas: widget imutabel yang membuat objek State lewat createState, dan kelas State yang menyimpan data yang berubah sekaligus menulis build. Widget bersifat sementara, sedangkan objek State bertahan di antara pemanggilan build.

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Berapa anak langsung yang dimiliki Column di pohon ini?

Scaffold(
  appBar: AppBar(title: const Text('Kasir')),
  body: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: [
        const Text('Total belanja'),
        Row(
          children: [
            const Icon(Icons.payments),
            Text('Rp25.000'),
          ],
        ),
      ],
    ),
  ),
)
Pilih satu jawaban

Latihan 2 dari 3

Aplikasi kasir punya empat widget buatan sendiri. Mana yang perlu menjadi StatefulWidget?

Pilih satu jawaban

Latihan 3 dari 3

Tombol plus diketuk tiga kali. Apa yang terlihat di layar?

class Penghitung extends StatelessWidget {
  Penghitung({super.key});

  int jumlah = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text('Jumlah: $jumlah'),
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {
            jumlah++;
          },
        ),
      ],
    );
  }
}
Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Lanjutkan ke