Tips Flutter: Otomatis Load Assets Gambar dan Design Warna

Load gambar tinggal panggil Assets.icons.xxx

Pada artikel ini, saya akan membagikan setup yang saya gunakan dalam membuat aplikasi Flutter. Salah satunya adalah setup untuk meload assets gambar secara otomatis tanpa harus memanggil nama file gambar satu per satu di view.

Selain itu, saya juga akan menambahkan setup sederhana untuk meng-generate warna berdasarkan design system yang sudah dibuat oleh designer. Jadi memudahkan programmer untuk memanggil semua warna tanpa harus menghafal #hexcolor.

Study Case

Kali ini kita akan membuat komponen flash message sederhana dengan 3 style yaitu success, warning, dan error. Hasil akhir dari aplikasinya seperti pada gambar di bawah. Saya menggunakan library flutter_gen untuk menggenerate gambar dan warna secara otomatis.

Hasil akhir study case

Setup Awal

Buat project flutter terlebih dahulu, kemudian edit pubspec.yaml dan tambahkan packages berikut untuk diinstall

dev_dependencies:
  build_runner: ^2.4.6
  flutter_gen_runner: ^5.3.1

Setelah terinstall, tambahkan setup berikut di urutan paling bawah. Setup ini berguna untuk mengimport dan menggenerate class untuk assets, fonts, dan colors secara otomatis. Class tersebut akan disimpan di folder /lib/gen/ (jangan diedit karena tergenerate secara otomatis).

Tambahkan juga scripts: derry.yaml untuk menggenerate aset melalui terminal.

scripts: derry.yaml

flutter_gen:
  output: lib/gen/
  assets:
    enabled: true
  fonts:
    enabled: true
  colors:
    enabled: true
    inputs: # custom lokasi
      - assets/color/colors.xml

Setelah semua sudah ditambahkan, maka file pubspec.yaml akan seperti ini

name: flutter_tips_image
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: '>=3.0.5 <4.0.0'

dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter

dev_dependencies:
  build_runner: ^2.4.6
  flutter_gen_runner: ^5.3.1
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

scripts: derry.yaml

flutter_gen:
  output: lib/gen/ # lokasi file generator
  assets:y
    enabled: true
  fonts:
    enabled: true
  colors:
    enabled: true
    inputs: # custom lokasi
      - assets/color/colors.xml

Buat file derry.yaml dan isi dengan kode berikut

build: flutter pub run build_runner build --delete-conflicting-outputs

Okee, sudah selesai setup!

Design warna otomatis

Ikuti langkah-langkah setup terlebih dahulu.

1. Buat folder assets/color. Buat juga folder assets/icons untuk nanti generate assets gambar. Tambahkan colors.xml di assets/color

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="successColor">#41CC53</color>
    <color name="infoColor">#3793FF</color>
    <color name="dangerColor">#B60B0B</color>
</resources>

2. Jalankan command derry build di terminal. Apabila berhasil maka akan ada output seperti berikut.

Output derry build

3. Otomatis akan muncul file generate colors.gen.dart yang menyimpan warna-warna yang sudah kita tambahkan tadi.

Hasil generate warna dari colors.xml

Waktunya kita implementasikan ke views!

Views

Buat file lib/components/flash_message_component.dart

Ubah file lib/main.dart seperti kode berikut

Ketika dijalankan di emulator, hasilnya akan seperti ini

Hasil sebelum implementasi warna otomatis

Ubah kode berikut ini,

color: type == FlashTypeEnum.success
          ? Colors.green
          : type == FlashTypeEnum.info
              ? Colors.blue
              : Colors.red,

Menjadi

color: type == FlashTypeEnum.success
    ? ColorName.successColor
    : type == FlashTypeEnum.info
        ? ColorName.infoColor
        : ColorName.dangerColor,

Tadaa, sekarang views kamu sudah berubah ke warna hasil generate otomatis tadi!

Warna mengambil dari hasil generate

Generate assets gambar otomatis

Ikuti langkah-langkah setup terlebih dahulu.

1. Silahkan untuk mengunduh icon di Google Drive. Simpan di folder assets/icons

2. Tambahkan setup berikut di pubspec.yaml di dalam flutter:

flutter:
  uses-material-design: true
  assets:
    - assets/icons/

3. Jalankan derry build lagi di terminal. Secara otomatis akan membuat file baru assets.gen.dart

Hasil generate file gambar icons

Views

Ubah file flash_message_component.dart

• Fungsi _getImage() akan mengembalikan image sesuai dengan jenis alert
• Untuk memanggil filenya hanya tinggal Assets.icons.success.image(); dimana {icons} adalah foldernya dan {success} adalah nama filenya. Kalau nama filenya dobel misal success_ilustration maka tinggal dipanggil jadi successIlustration (camelCase)

Hasil akhirnya seperti ini

Hasil akhir dengan gambar otomatis

📝 Catatan

Kita juga bisa mendapatkan info dari file assets/icons/success.png:

• Assets.icons.success adalah implementasi dari AssetImage class.
• Assets.icons.success.image(...) mengembalikan Image class.
• Assets.icons.success.provider(...) mengembalikan ImageProvider class.
• Assets.icons.success.path return path string.
• Assets.icons.success.values return values list.

Widget build(BuildContext context) {
  return Assets.icons.success.image();
}

Widget build(BuildContext context) {
  return Assets.icons.success.image(
    width: 120,
    height: 120,
    fit: BoxFit.scaleDown,
  );

Widget build(BuildContext context) {
  // Assets.icons.success.path = 'assets/icons/success.png'
  return Image.asset(Assets.icons.success.path);
}

🔗 Link Penting

Informasi lainnya bisa kamu dapatkan lebih lengkap di dokumentasi https://pub.dev/packages/flutter_gen

Kesimpulan

• Permudah load assets dan warna dengan package flutter_gen
• Pakai derry untuk script manager
• Panggil Assets.folder.subfolder.subfolder.namaFile untuk meload generate assets / gambar
• Panggil ColorName.custom untuk meload warna pada colors.xml

Terima kasih, semoga bermanfaat!
Kalau masih ada yang bingung, feel free tanyain aja 😄

Miftahul Huda adalah seorang mobile developer yang senang berbagi tutorial iOS SwiftUI dan Flutter. Huda juga memiliki pengalaman di bidang fullstack web development selama 3 tahun lebih. Selain menulis, Huda juga aktif berkontribusi di komunitas teknologi antara lain GDG Surabaya & SurabayaDev