Ngopi Ngoding Ngoprek Flutter Bagian 6 : Pubspec

Pubspec adalah file tempat kita menulis asset-asset apa saja dan dependencies apa saja yang digunakan di dalam project. Pada pembahasan kali ini, kita akan belajar bagaimana cara mengimport gambar dan dependencies ke dalam project.

Bagian 1 : Mengimport Gambar

Pertama, buka file pubspec.yaml, kemudian perhatikan gambar di bawah ini

Siapkan file gambar bernama kopiLaptop.jpg kemudian tempatkan file tersebut ke dalam folder assets/img lalu tuliskan alamat yang sama pada file pubspec.yaml dibawah tulisan assets, untuk panduannya silahkan lihat lingkaran-lingkaran merah pada gambar di atas.

Jika sudah, tekan ctrl+S lalu virtual studio secara otomatis akan melakukan pub get secara otomatis untuk mendownload dan mengatur file-file yang diperlukan yang ditulis di pubspec.

Setelah pub get selesai dijalankan, lakukan build ulang file apk bundle kemudian pasang ke genymotion, karena setiap kali kita melakukan perubahan pada file pubspec maka diperlukan build ulang agar hasil perubahannya bisa dilihat di emulator.

Setelah mempersiapkan pubspec, buka file main.dart lalu tambahkan skrip untuk widget Image, silahkan lihat pada gambar di bawah ini

Pastikan tulisan assets/img/kopiLaptop.jpg sesuai dengan nama file yang Anda miliki dan lokasi tempat penyimpanannya silahkan disesuaikan

Jika sudah, lakukan flutter Attach dan seperti biasa pastikan muncul tulisan syncing filesnya, jika tidak maka harus melakukan flutter Attach dari awal

Begitu selesai syncingnya, seperti biasa akan muncul panduan hot reload, r untuk hot reload dan R untuk hot restart. Pada awal dijalankan, Anda masih melihat tampilan yang lama bekas pelajaran dari bab sebelumnya, tekan R untuk hot restart, kemudian Anda akan melihat gambar pada aplikasi yang sedang dijalankan

 Jika Anda belum berhasil, ada banyak faktor, salah satunya kesalahan menulis nama file, jangan gunakan underscore atau tanda unik lainnya, gunakan saja karakter biasa (a-z), silahkan diperiksa lagi dimana kesalahannya.

Bagian 2 : Mengimport Dependencies

Dependencies adalah program-program kecil dengan fungsi beraneka ragam, baik itu berhubungan dengan koneksi internet, membaca GPS, membaca file, User Interface dan lain-lain, yang bisa diimport ke project Flutter, gunanya untuk menghemat waktu agar kita tidak perlu membuat program-program mini dari awal. Pada contoh artikel ini kita akan belajar cara mengimport dependency yang berhubungan dengan CSS.

Pertama, kunjungi situs dibawah ini

Di situs pub dev ini ada tiga tab, tab Readme untuk melihat informasi tentang dependencies, tab Installing untuk melihat cara installnya dan tab Versions untuk melihat daftar versi yang ada. Klik tab installing lalu copy sesuai gambar dibawah ini

Kemudian salin ke file pubspec.yaml dibawah dependencies

Kemudian tekan Ctrl+S maka Visual Studio Code akan secara otomatis mengeksekusi pub get, Anda bisa melihatnya di kanan bawah editor

Itu lah cara mengimport gambar dan dependencies, insya Allah kita akan bertemu dengan dua teknik ini lebih sering pada bab-bab sebelumnya, semoga bermanfaat