Menampilkan Gambar dan Ikon

Gambar dari asset lokal

Untuk gambar yang dibundel bersama aplikasi (logo, ilustrasi), simpan di folder misalnya assets/images/, daftarkan di pubspec.yaml, lalu tampilkan dengan Image.asset.

flutter:
  assets:
    - assets/images/

Image.asset(
  'assets/images/logo.png',
  width: 120,
  height: 120,
  fit: BoxFit.contain,
)

Setelah menambah asset baru, jalankan ulang aplikasi (hot restart) karena daftar asset dibaca saat startup, bukan saat hot reload.

Gambar dari internet

Image.network memuat gambar dari URL. Selalu sediakan loadingBuilder dan errorBuilder agar UI tidak kosong atau crash saat gambar gagal dimuat.

Image.network(
  'https://example.com/produk/kopi.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, progress) {
    if (progress == null) return child;
    return const Center(child: CircularProgressIndicator());
  },
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.broken_image, size: 64, color: Colors.grey);
  },
)

Properti fit mengatur cara gambar mengisi kotaknya: cover memotong agar penuh, contain menampilkan utuh, fill memaksa penuh tanpa menjaga rasio.

Ikon bawaan

Flutter membawa ribuan ikon Material lewat class Icons dan gaya iOS lewat CupertinoIcons (butuh package cupertino_icons).

const Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.shopping_cart, size: 32, color: Colors.teal),
    SizedBox(width: 16),
    Icon(Icons.favorite, size: 32, color: Colors.red),
  ],
)

Ikon adalah font, jadi ia tajam di semua ukuran layar dan bisa diwarnai sesukamu.

Catatan teknis: Image.network melakukan caching di memori tapi tidak persisten di disk secara bawaan. Untuk daftar produk dengan banyak gambar, pakai package cached_network_image agar gambar tidak diunduh ulang setiap rebuild dan aplikasi tetap mulus saat scroll. Jangan memuat gambar resolusi raksasa lalu mengecilkannya di UI, itu boros memori dan bikin jank.