#2 Flutter Tutorial : Menambahkan Asset (Gambar, Suara dan Font) kedalam Projek Flutter
Hello Semua, berawal dari artikel pertama yang saya tuliskan di medium mengenai cara format tanggal ke dalam Bahasa Indonesia, ternyata lumayan banyak dicari oleh pembaca dibandingkan dengan artikel saya yang lainnya. Oleh karena itu saya berkesimpulan masih banyak orang yang belajar flutter dan membutuhkan tutorial simple seperti ini.
Pada kesempatan kali ini saya akan memberikan tutorial tentang cara menambahkan assets kedalam projek flutter kita. cara ini bisa dipakai untuk menambahkan gambar, suara, font maupun video kedalam projek flutter kita. Namun tentu saja implementasinya untuk setiap jenis asset akan berbeda, akan tetapi cara untuk menambahkannya sama saja. pada artikel kali ini saya mencotohkan menggunakan asset image kedalam projek flutter.
Ketika kita membuat sebuah aplikasi kita pasti memerlukan assets untuk membuat aplikasi kita menjadi seperti yang kita inginkan. Diantara berbagai macam asset bisa berupa gambar, suara, font, maupun video. Tentu saja adanya asset tersebut juga akan meningkatkan pengalaman user. Berikut ini saya berikan langkah-langkah menambahkan asset image.
1. Langkah Pertama : Pastikan sobat telah membuat projek flutter
Sebelum kita setup directory assets pastikan anda sudah bisa membuat project flutter baik itu menggunkan android studio atau visual studio code. Tentu saja antara kedua IDE tersebut mempunyai langkah yang hampir mirip. Sebagai contoh saya telah membuat projek dengan nama i_am_rich menggunakan android studio sehingga memiliki struktur projek seperti gambar dibawah ini.
2. Langkah Kedua: Buat directory asset pada project flutter
Selanjutnya kita bisa klik kanan di directory i_am_rich, pindahkan pointer menuju new menu, kemudian pilih directory.
Setelah kita memilih menu directory maka akan android studio akan menampilkan popup untuk kita memberi nama directory asset kita, pada contoh ini saya memberikan nama images untuk directory assets kita ,kemudian tekan enter.
3. Langkah Ketiga : Tambahkan assets yang kita inginkan kedalam folder images
Selanjutnya kita menambahkan asset ke dalam folder images dengan cara drag/drop atau copy/paste di projek images dan klik ok sehingga asset yang kita inginkan telah berada pada folder images. pada kali ini saya menggunakan gambar sebagai asset dengan nama diamond.png sehingga strukrut directory/folder akan menjadi seperti gambar dibawah ini.
4. Langkah Keempat: Setup directory asset di dalam file pubspec.yaml
file pubspec.yaml merupakan file yang sangat penting dalam projek flutter terletak pada hirarki paling luar dalam dari project i_am_rich. Didalamnya berisi banyak setup yang dibutuhkan seperti nama project, description, version, dependencies dll. Pada file ini juga lah kita bisa melakukan setup assets directory. Sebenarnya di file ini kita telah dikasih bantuan oleh developer flutterdengan adanya file comment tentang cara setup directory asset.
Untuk memudahkan kita bisa uncomment tetapi pada contoh kali ini saya hapus semua comment dan kita tambahkan line baru berupa,
assets:
- images/Sehingga isi file pubspec.yaml akan terlihat lebih clear dan enak dipandang.
Perlu diperhatika bahwa pada file yaml sangat sesitif dengan apabila kita menambahkan 2 spasi berarti kita membuat line tesebut berada pada hirarki diatasnya.
Sebagai contoh sebelum kita menuliskan assets: yang sebelumnya telah ditambahkan 2 spasi dengan maksud assets: berada di dalam flutter: , begitu juga dengan -images/ kita akan berada didalam assets:
Langkah 5: Jalankan pub get dan siap impelentasi kedalam program
Langkah terakhir adalah jalankan perintah pub get dengan cara menekan tombol pub get yang berada pada kanan atas pada pubspec.yaml kita atau dengan cara klik menu tools -> flutter -> flutter pub get.
Sehingga kita siap lanjut kedalam implentasi di dalam file main.dart. Hapus line yang tidak diperlukan dan kita tambahkan code menjadi seperti ini.
Sehingga apabila program dijalankan akan menampilkan image yang telah kita tambahkan kedalam aplikasi kita.
Yeay.. Akhirnya kita telah bisa menambahkan projek assets ke dalam projek flutter kita. Apabila tutorial ini bermanfaat silakan bisa klik claps dan share ke yang lainnya ya. Anda bisa membaca artikel yang saya tulis lainnya di menu bio diatas.
Sampai berjumpa pada tutorial berikutnya…
Happy Learning..;)
