Tombol & Event

Membuat tombol yang merespons sentuhan dengan onPressed, menampilkan SnackBar, dan mengenal berbagai jenis tombol.

Part 12 dari 23 ± 40 menit Gratis

Aplikasi yang merespons pengguna

Sampai sekarang tampilanmu statis. Saat pengguna menyentuh sesuatu, aplikasi perlu bereaksi. Kejadian seperti sentuhan disebut event, dan kode yang dijalankan saat event terjadi disebut callback atau handler.

Jenis tombol

Widget	Tampilan	Cocok untuk
`ElevatedButton`	Tombol berlatar warna	Aksi utama
`TextButton`	Hanya teks	Aksi sekunder
`IconButton`	Hanya ikon	Aksi kecil (hapus, favorit)
`FloatingActionButton`	Tombol bulat melayang	Aksi paling penting di halaman

onPressed

ElevatedButton(
  onPressed: () {
    print('Tombol ditekan!');
  },
  child: const Text('Tekan aku'),
)

onPressed menerima sebuah function. Function itu dijalankan saat tombol ditekan, bukan saat tombol digambar.
() { ... } adalah function tanpa nama. Penulisan yang salah: onPressed: print('x') — ini memanggil print saat tampilan dibuat, bukan saat ditekan.
child adalah isi tombol (biasanya Text).
Jika onPressed diisi null, tombol tampil pudar dan tidak bisa ditekan (disabled).

SnackBar: pesan singkat di bawah layar

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('Tombol ditekan!')),
);

context adalah "alamat" widget di dalam pohon; Flutter memakainya untuk menemukan Scaffold terdekat. Kamu mendapatkannya dari parameter build(BuildContext context).

Membuat widget apa pun bisa disentuh

Bungkus dengan GestureDetector(onTap: ..., child: ...) atau InkWell(onTap: ..., child: ...) (yang ini memberi efek riak saat disentuh).