Menggunakan Icon dan Image di Flutter: Panduan Lengkap untuk Pemula

September 21, 2025
oleh Edusoft Center

DAFTAR ISI

1. Pendahuluan

Flutter adalah framework open-source dari Google yang memudahkan developer membuat aplikasi mobile, web, dan desktop dengan satu basis kode. Salah satu elemen penting dalam tampilan aplikasi adalah ikon dan gambar. Tanpa ikon dan gambar, aplikasi terasa kaku dan kurang menarik.

Dalam artikel ini, kita akan membahas cara menggunakan Icon dan Image di Flutter, mulai dari dasar hingga praktik langsung membuat tampilan profil sederhana yang memadukan keduanya.

2. Apa Itu Icon dan Image di Flutter

Icon adalah simbol grafis kecil yang biasanya digunakan untuk navigasi, representasi fungsi, atau mempercantik tampilan UI. Flutter menyediakan kumpulan ikon bawaan melalui paket Icons.
Image adalah gambar (foto atau ilustrasi) yang ditampilkan di aplikasi. Flutter mendukung gambar dari berbagai sumber, seperti assets lokal, internet (network), maupun file di perangkat.

Contoh penggunaannya:

Ikon home, search, atau settings pada aplikasi.
Gambar profil, banner, atau produk pada tampilan aplikasi.

3. Cara Menambahkan Icon di Flutter

3.1 Menggunakan Widget `Icon`

Flutter memiliki widget khusus untuk ikon bernama Icon.
Contoh kode sederhana:

Icon(
  Icons.home,
  color: Colors.blue,
  size: 40.0,
)

Kode di atas akan menampilkan ikon rumah berwarna biru dengan ukuran 40 pixel.

3.2 Menggunakan Paket `Icons` Bawaan Flutter

Flutter sudah menyediakan ribuan ikon bawaan melalui Icons.
Contoh:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.home, color: Colors.green, size: 30),
    Icon(Icons.search, color: Colors.orange, size: 30),
    Icon(Icons.settings, color: Colors.red, size: 30),
  ],
)

Hasilnya: tiga ikon (home, search, settings) berjajar dalam satu baris.

3.3 Kustomisasi Warna, Ukuran, dan Alignment

Kita bisa mengatur properti ikon dengan mudah:

color → mengubah warna.
size → mengubah ukuran.
alignment → mengatur posisi di dalam container.

4. Cara Menambahkan Gambar di Flutter

4.1 Menggunakan `Image.asset`

Untuk menampilkan gambar dari assets lokal, langkahnya:

Tambahkan gambar ke folder assets/ di proyek Flutter.
Daftarkan di pubspec.yaml:

flutter:
  assets:
    - assets/profile.jpg

Tampilkan dengan Image.asset:

Image.asset(
  'assets/profile.jpg',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

4.2 Menggunakan `Image.network`

Untuk menampilkan gambar dari internet:

Image.network(
  'https://example.com/profile.jpg',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

4.3 Menggunakan `Image.file` (Opsional)

Jika mengambil gambar dari file lokal perangkat (misalnya hasil kamera):

Image.file(
  File('/path/to/image.png'),
  width: 100,
  height: 100,
)

5. Perbedaan Antara `Icon` dan `Image`

Aspek	Icon	Image
Sumber	Bawaan Flutter (`Icons`) atau custom	File lokal, internet, file device
Ukuran	Mudah diatur dengan properti `size`	Perlu `width`/`height`
Warna	Bisa langsung diganti dengan `color`	Harus di-edit manual di file gambar
Resolusi	Vektor (tajam di semua ukuran)	Bitmap (kualitas tergantung resolusi)

6. Praktik: Membuat Tampilan Profil Sederhana

Sekarang kita gabungkan semua pengetahuan di atas untuk membuat halaman profil sederhana.

6.1 Struktur Layout

Foto profil → Image.asset
Nama pengguna → Text
Ikon media sosial → Row dengan beberapa Icon
Tombol edit profil → IconButton

6.2 Contoh Kode Lengkap

import 'package:flutter/material.dart';

void main() {
  runApp(ProfileApp());
}

class ProfileApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfilePage(),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Profil Saya"),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Foto profil
            CircleAvatar(
              radius: 60,
              backgroundImage: AssetImage('assets/profile.jpg'),
            ),
            SizedBox(height: 16),

            // Nama pengguna
            Text(
              "Claresta Dev",
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),

            // Deskripsi singkat
            Text(
              "Flutter Developer | UI Enthusiast",
              style: TextStyle(fontSize: 16, color: Colors.grey[700]),
            ),
            SizedBox(height: 20),

            // Ikon media sosial
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.facebook, color: Colors.blue, size: 30),
                SizedBox(width: 15),
                Icon(Icons.camera_alt, color: Colors.purple, size: 30),
                SizedBox(width: 15),
                Icon(Icons.alternate_email, color: Colors.red, size: 30),
              ],
            ),
            SizedBox(height: 20),

            // Foto online dengan Image.network
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Image.network(
                'https://picsum.photos/200/300',
                width: 200,
                height: 150,
                fit: BoxFit.cover,
              ),
            ),

            SizedBox(height: 20),

            // Tombol edit profil
            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.edit),
              label: Text("Edit Profil"),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

6.3 Penjelasan

CircleAvatar → menampilkan foto profil berbentuk lingkaran.
Text → menampilkan nama dan deskripsi pengguna.
Row dengan Icon → menampilkan ikon media sosial.
Image.network → menampilkan foto dari internet.
ElevatedButton.icon → tombol edit dengan ikon pensil.

Hasilnya: Tampilan profil sederhana dengan foto, nama, deskripsi, ikon sosial media, dan tombol edit profil.

7. Tips Optimasi Icon dan Image di Flutter

Gunakan SVG untuk ikon kustom agar tetap tajam.
Kompres gambar sebelum dimasukkan ke folder assets.
Gunakan BoxFit.cover untuk cropping gambar agar proporsional.
Gunakan widget FadeInImage jika ingin efek transisi saat gambar dari internet dimuat.
Simpan gambar statis di assets/, sementara gambar dinamis gunakan Image.network.

8. Kesimpulan

Icon digunakan untuk simbol grafis sederhana, sedangkan Image untuk menampilkan gambar/foto.
Flutter mendukung gambar dari assets lokal, internet, maupun file perangkat.
Dengan kombinasi Icon dan Image, kita bisa membuat UI yang lebih menarik.
Praktik membuat profil sederhana menunjukkan bagaimana ikon dan gambar bisa bekerja bersama dalam aplikasi nyata.

Dengan pemahaman ini, Anda bisa mengembangkan aplikasi Flutter dengan tampilan yang lebih kaya dan interaktif.