Flutter Dasar - Image widget

     Untuk menampilkan image dalam sebuah aplikasi, tentunya kita harus membutuhkan widget untuk menampilkan sebuah image yang memang diperuntukkan untuk image. untuk widget image ini, kita tidak hanya melakukan sebuah program pada main.dart, akan tetapi kita juga akan melakukan program pada sebuah file pubspeck.yaml yang terletak di folder test. Oleh karena itu, kita masuk ke langkah atau cara dalam melakukan praktikum untuk menampilkan gambar atau image.

    Untuk langkah awal yaitu kita akan membuat sebuah container untuk menempatkan image. untuk containernya dan programnya yaitu seperti pada gambar di bawah ini.

    Setelah membuat container, kita akan membuat folder images khusus menyimpan image yang akan kita gunakan pada sebuah aplikasi

    Kemudian berikan nama folder tersebut dengan nama "images"

    Setelah itu siapkan image yang akan digunakan. Disini saya sudah menyiapkan gambar yang sudah saya download secara gratis, bagi kalian yang ingin mendapatkan gambar secara gratis seperti yang saya gunakan, silahkan kunjungi website unsplash.com, dan masukkan gambar sesuai selera di bagian pencarian.

    Setelah mendownload gambar yang akan digunakan, lakukan drop dari gambar ke folder image yang ada di android sudio aplikasi yang kita gunakan

    

Jika muncul seperti ini, silahkan klik refactor

    Jika berhasil menyimpan gambar di folder image, maka akan muncul gambar tersebut di folder image android studio seperti berikut ini

    Jika gambar sudah tersimpan di dalam folder image, langkah selanjutnya yaitu mendaftarkan image ke dalam program kita, karena jika kita biarkan seperti itu, maka image yang kita simpan sama saja tidak akan terbaca, karena belum terdaftar pada program kita, seperti pada gambar di bawah ini

    Gambar di atas menunjukkan program untuk menampilkan widget image, akan tetapi gambar tidak muncul karena gambar belum terdaftar di dalam program kita.

    

    Berikut ini cara mendaftarkan gambar kita ke file program kita main.dart, Nah disinilah kita akan melakukan program atau mengedit file "pubpspec.yaml". Untuk mendaftarkan gambar yaitu silahkan masuk ke file pubspec.yaml, Setelah itu cari baris yang tertulis :

 #To add assets....

#assets :

    Seperti pada gambar berikut ini

    Buka comments assed tersebut dengan menghilangkan tanda "#". kemudian masukkan folder gambar di dalam assets, untuk formatnya yaitu sebagai berikut :

assets :

- folder dari gambar/nama file gambar

 Seperti pada gambar yaitu sebagai berikut 

    Setelah mendaftarkan image ke dalam file pubspec.yaml, silahkan ctrl+s untuk menyimpan perubahan program tersebut dan lakukan restart pada debugging

    Setelah itu kembali ke file main.dart dan jalankan program tersebut, maka gambar yang kita masukkan tadi sudah muncul pada layer aplikasi seperti berikut ini

    Selain itu, ada properti "fit: BoxFit" yang terdiri dari beberapa value. jadi, jika kita menggunakan value cover, maka format penulisannya sebagai berikut

fit: BoxFit.cover,

image: AssetImage("images/images.jpg")

    Seperti pada program berikut ini

    Dengan menggunakan value cover, hasil gambarnya akan memenuhi container seperti pada gambar di atas. value selanjutnya yaitu fill, dengan hasil sebagai berikut

    

    Menggunakan value fill pada BoxFit akan memaksa gambar tetap pas dalam sebuah container, walaupun ukurannya tetap dipaksa untuk pas dengan ukuran container. value berikutnya yaitu contain, hasil dari value contain ini akan memberikan ukuran gambar seperti berikut ini

    Ukuran dari value contain terlihat sangat bagus dan begitu pas serta lebih rapi, karena ukuran gambar akan terlihat begitu pas.

    Kemudian kita juga bisa melakukan penulisan dari program widget images seperti berikut ini

child: Image.asset("nama folder/nama file gambar", fit: BoxFit.value dari BoxFit,)

    Sebagai contoh, pada program ini saya menggunakan value contain, maka hasilnya akan sama saja seperti sebelumnya. Programnya adalah sebagai berikut

     Jadi, jika kita ganti menjadi fill, maka hasilnya akan menjadi sebagai berikut

    Baik, mungkin sampai disini dulu untuk pembahasan widget image, sampai jumpa di pembahasan selanjutnya.