Icon Widget

Analogi: Rambu Lalu Lintas

Bayangkan kamu menyetir di kota asing. Kamu tidak bisa membaca bahasa di papan petunjuk, tapi kamu langsung paham arti rambu segitiga bergambar orang menyeberang atau lingkaran merah bergaris. Itulah kekuatan ikon: pesan yang tersampaikan tanpa perlu membaca teks. Di aplikasi, ikon bekerja persis seperti itu. Pengguna langsung mengenali gambar keranjang belanja, kaca pembesar, atau hati tanpa perlu label panjang. Widget Icon di Flutter adalah cara menampilkan simbol-simbol universal ini, dan Flutter sudah menyediakannya ribuan secara bawaan.

Kenapa Widget Icon Itu Ada?

Coba bayangkan alternatifnya: setiap ikon di aplikasimu adalah file gambar PNG yang kamu gambar sendiri. Masalahnya langsung menumpuk. Pertama, ukuran aplikasi membengkak karena puluhan file gambar. Kedua, gambar PNG pecah dan blur saat diperbesar di layar tablet atau TV. Ketiga, mengubah warna ikon (misalnya dari abu-abu menjadi merah saat tombol "suka" aktif) berarti kamu harus menyimpan dua file gambar terpisah.

Flutter menyelesaikan ketiga masalah ini dengan menjadikan ikon sebagai font vektor, bukan gambar. Kelas Icons berisi ribuan ikon Material Design yang dirender sebagai vektor: tajam di ukuran berapa pun, bisa diwarnai ulang hanya dengan satu properti, dan tidak menambah ukuran file gambar ke aplikasimu. Itulah alasan Icon adalah widget tersendiri, bukan sekadar Image biasa.

Dasar: Menampilkan Ikon

Penggunaan paling sederhana hanya butuh nama ikon dari kelas Icons:

const Icon(
  Icons.shopping_cart,
  size: 32,
  color: Colors.teal,
)

Tiga hal yang bisa kamu atur: ikonnya sendiri (Icons.namafitur), size dalam logical pixel, dan color. Kalau kamu bingung memilih nama ikon, buka fonts.google.com/icons lalu ketik kata kunci seperti "cart", "heart", atau "settings". Nama yang tampil di sana sama persis dengan nama di kelas Icons.

Catatan teknis: Tambahkan semanticLabel (misalnya semanticLabel: 'Keranjang belanja') agar pembaca layar bisa menjelaskan ikon ke pengguna tunanetra. Ikon dekoratif murni sebaiknya tidak diberi label agar tidak mengganggu.

Contoh Lebih Nyata: Grid Menu Aplikasi

Di aplikasi nyata, ikon jarang berdiri sendiri. Biasanya ia dipasangkan dengan label teks, seperti menu di aplikasi ojek online atau dompet digital:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _menuItem(Icons.account_balance_wallet, 'Dompet', Colors.teal),
    _menuItem(Icons.receipt_long, 'Tagihan', Colors.orange),
    _menuItem(Icons.headset_mic, 'Bantuan', Colors.blue),
  ],
)

Widget _menuItem(IconData icon, String label, Color color) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        padding: const EdgeInsets.all(14),
        decoration: BoxDecoration(
          color: color.withValues(alpha: 0.12),
          borderRadius: BorderRadius.circular(16),
        ),
        child: Icon(icon, size: 28, color: color),
      ),
      const SizedBox(height: 8),
      Text(label, style: const TextStyle(fontSize: 12)),
    ],
  );
}

Perhatikan polanya: Icon dibungkus Container berwarna lembut sebagai latar, lalu diberi label di bawahnya. Pola "ikon + label" seperti ini muncul di hampir semua aplikasi Indonesia, dari menu PPOB sampai kategori marketplace.

Ikon yang Bisa Ditekan: Pakai IconButton

Saat ikon harus bisa ditekan, jangan membungkus Icon dengan GestureDetector. Pakai IconButton, karena ia memberi dua hal penting secara gratis: efek ripple Material saat ditekan, dan area sentuh minimum 48x48 piksel sesuai panduan aksesibilitas (jari manusia butuh target yang cukup besar).

IconButton(
  icon: const Icon(Icons.favorite),
  color: Colors.red,
  onPressed: () {
    // tandai sebagai favorit
  },
  tooltip: 'Suka',
)

Properti tooltip menampilkan teks kecil saat ikon ditekan lama. Ini bukan hiasan: bagi pengguna pembaca layar, tooltip adalah satu-satunya cara mereka tahu fungsi tombol tersebut.

Kesalahan Umum Pemula

1. Membungkus Icon dengan GestureDetector untuk tombol

// SALAH: tidak ada ripple, area sentuh sekecil ikonnya
GestureDetector(
  onTap: () {},
  child: const Icon(Icons.delete),
)

// BENAR: ripple + area sentuh 48px otomatis
IconButton(
  icon: const Icon(Icons.delete),
  onPressed: () {},
  tooltip: 'Hapus',
)

2. Lupa tooltip di IconButton. Tanpa tooltip, pengguna tunanetra hanya mendengar "tombol, tidak berlabel". Selalu isi tooltip dengan kata kerja singkat: 'Cari', 'Hapus', 'Simpan'.

3. Memakai file gambar untuk ikon sederhana. Kalau ikonnya tersedia di kelas Icons (hampir selalu tersedia), jangan repot-repot mengunduh PNG dari internet. Ikon bawaan lebih tajam, lebih ringan, dan warnanya bisa diubah kapan saja.