Tutorial Dart 31 : Assets and Images Flutter dan Cara Menambahkannya

Last Updated on March 14, 2022 by

Terkadang, suatu program tidak hanya berisi kode saja tetapi juga berisikan assets atau yang dikenal juga dengan resource. Sebuah assets and images Flutter membantu tampilan aplikasi Anda menjadi lebih baik dan menarik untuk dilihat.

Pada artikel ini, Anda akan melihat tutorial Flutter Images khususnya terkait cara menambahkan assets dan gambar pada program. Jika Anda ingin tahu cara menambahkan assets and images Flutter, simak terus artikel ini sampai akhir.

Apa Itu Assets and Images Flutter?

Sebelum membahas cara menambahkan assets maupun gambar pada Flutter, Anda perlu mengetahui apa itu assets and images Flutter. Apakah keduanya sama atau berbeda?

Assets adalah file yang dibundel dan di-deploy dengan aplikasi Anda, dan dapat diakses saat runtime. Jenis assets yang umum mencakup data statis (misalnya, file JSON), file konfigurasi, ikon, dan gambar (JPEG, WebP, GIF, WebP/GIF animasi, PNG, BMP, dan WBMP).

Banyak orang yang membedakan assets dan images Flutter menjadi hal yang berbeda. Namun, keduanya merupakan sebuah kesatuan. Images sendiri adalah bagian dari assets Flutter. Setelah ini, Anda akan melihat tutorial Flutter image dari Codekey.

Menentukan assets

Flutter menggunakan file pubspec.yaml, yang terletak di root proyek Anda, untuk mengidentifikasi assets yang diperlukan oleh aplikasi. Berikut ini contohnya:

flutter:
  assets:
    - assets/icon.png
    - assets/background.png

Untuk memasukkan semua assets di bawah direktori, tentukan nama direktori dengan karakter / di akhir:

flutter:
  assets:
    - graphics/background.png

Penggabungan assets

Subbagian assets dari bagian flutter menentukan file yang harus disertakan dengan aplikasi. Setiap assets diidentifikasi dengan jalur eksplisit (relatif terhadap file pubspec.yaml) tempat file assets berada. Urutan di mana assets dinyatakan tidak masalah.

Nama direktori sebenarnya yang digunakan (assets dalam contoh pertama atau direktori dalam contoh di atas) tidak masalah. Selama build, Flutter menempatkan assets ke dalam arsip khusus yang disebut bundel assets yang dibaca aplikasi saat runtime.

Varian assets

Proses build mendukung gagasan varian assets: versi berbeda dari assets and image Flutter  yang mungkin ditampilkan dalam konteks berbeda. Saat jalur assets ditentukan di bagian assets pubspec.yaml, proses pembuatan akan mencari file apa pun dengan nama yang sama di subdirektori yang berdekatan.

File tersebut kemudian disertakan dalam kumpulan assets bersama dengan assets yang ditentukan. Misalnya, jika Anda memiliki file berikut di direktori aplikasi Anda:

.../pubspec.yaml
.../graphics/icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.
Dan file pubspec.yaml Anda berisi yang berikut:
flutter:
  assets:
    - graphics/background.png

Kemudian graphics/background.png dan graphics/dark/background.png disertakan dalam bundel assets Anda. Yang pertama dianggap sebagai assets utama, sedangkan yang kedua dianggap sebagai varian.

Di sisi lain direktori grafis ditentukan seperti ini

flutter:
  assets:
    - graphics/

Kemudian file graphics/icon.png, graphics/background.png dan graphics/dark/background.png juga disertakan. Flutter menggunakan varian assets saat memilih gambar yang sesuai dengan resolusi. Di masa mendatang, mekanisme ini mungkin diperluas untuk menyertakan varian untuk lokal atau wilayah yang berbeda, petunjuk arah membaca, dan sebagainya.

Memuat aset

Aplikasi Anda dapat mengakses asetnya melalui objek AssetBundle. Dua metode utama pada bundel aset memungkinkan Anda memuat aset string/teks (loadString()) atau aset gambar/biner (load()) dari bundel, dengan diberikan logical key. Logical key memetakan ke jalur ke aset yang ditentukan dalam file pubspec.yaml pada waktu pembuatan.

Memuat aset teks

Setiap aplikasi Flutter memiliki objek rootBundle untuk akses mudah ke bundel aset utama. Anda dapat memuat aset  langsung dari package:flutter/services.dart. menggunakan rootBundle global statis.

Namun, disarankan untuk mendapatkan AssetBundle untuk BuildContext saat ini menggunakan DefaultAssetBundle, daripada bundel aset default yang dibuat dengan aplikasi; pendekatan ini memungkinkan widget induk untuk menggantikan AssetBundle yang berbeda pada waktu proses, yang dapat berguna untuk skenario pelokalan atau pengujian.

Biasanya, Anda akan menggunakan DefaultAssetBundle.of() untuk memuat aset secara tidak langsung, misalnya file JSON, dari rootBundle runtime aplikasi.

Di luar konteks Widget, atau saat pegangan ke AssetBundle tidak tersedia, Anda dapat menggunakan rootBundle untuk memuat aset tersebut secara langsung. Sebagai contoh:

Memuat gambar

Flutter dapat memuat gambar yang sesuai dengan resolusi untuk rasio piksel perangkat saat ini. Berikut adalah penjelasan tentang pemuatan gambar di Flutter.

1. Mendeklarasikan aset gambar yang sadar resolusi

AssetImage memahami cara memetakan aset logis yang diminta ke aset yang paling cocok dengan rasio piksel perangkat saat ini. Agar pemetaan ini berfungsi, aset harus diatur menurut struktur direktori tertentu:

import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

Di mana M dan N adalah pengidentifikasi numerik yang sesuai dengan resolusi nominal gambar yang terkandung di dalamnya. Dengan kata lain, mereka menentukan rasio piksel perangkat yang dimaksudkan untuk gambar.

Aset utama diasumsikan sesuai dengan resolusi 1.0. Misalnya, pertimbangkan tata letak aset berikut untuk gambar bernama icon.png:

.../icon.png
.../2.0x/icon.png
.../3.0x/icon.png

Pada perangkat dengan rasio piksel perangkat 1,8, aset …/2.0x/icon.png dipilih. Untuk rasio piksel perangkat 2,7, aset …/3.0x/icon.png dipilih.

Jika lebar dan tinggi gambar yang dirender tidak ditentukan pada widget Gambar, resolusi nominal digunakan untuk menskalakan aset sehingga menempati jumlah ruang layar yang sama seperti yang dimiliki aset utama, hanya dengan resolusi yang lebih tinggi.

Yaitu, jika …/icon.png adalah 72px kali 72px, maka …/3.0x/icon.png harus berukuran 216px kali 216px; tetapi keduanya dirender menjadi 72px kali 72px (dalam piksel logis), jika lebar dan tinggi tidak ditentukan.

Setiap entri di bagian aset pubspec.yaml harus sesuai dengan file asli, dengan pengecualian entri aset utama. Jika entri aset utama tidak sesuai dengan file asli, aset dengan resolusi terendah digunakan sebagai cadangan untuk perangkat dengan rasio piksel perangkat di bawah resolusi tersebut. Namun, entri harus tetap disertakan dalam manifes pubspec.yaml.

1. Memuat Gambar

Berikut ini adalah tutorial Flutter Images khusus tentang memuat gambar di Flutter. Untuk memuat gambar, gunakan kelas AssetImage dalam metode build() widget. Misalnya, aplikasi Anda dapat memuat gambar latar belakang dari deklarasi aset di atas:

return const Image(image: AssetImage('graphics/background.png'));

Apa pun yang menggunakan bundel aset default mewarisi kesadaran resolusi saat memuat gambar. (Jika Anda bekerja dengan beberapa kelas tingkat yang lebih rendah, seperti ImageStream atau ImageCache, Anda juga akan melihat parameter yang terkait dengan skala.)

Itulah penjelasan tentang assets and images Flutter yang perlu diketahui oleh Anda yang sedang bahasa pemrograman Dart khususnya terkait framework Flutter. Jika Anda ingin belajar lebih banyak seputar Bahasa pemrograman Dart khususnya terkait dengan Flutter, kunjungi Codekey di https://codekey.id/.

Codekey adalah media untuk belajar Bahasa pemrograman gratis dan dapat dipelajari di mana saja. Kunjungi selalu Codekey untuk dapatkan materi terbaru setiap harinya.