Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 31 : Assets and Images Flutter dan...

Tutorial Dart 31 : Assets and Images Flutter dan Cara Menambahkannya

-

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.

Artikel Terkait  Tutorial Dart 3 : Dart Syntax, Belajar Menggunakannya

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:

Artikel Terkait  Tutorial Dart 10 : Dart Map, Cara Mendeklarasikan Object Map dalam Dart

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya