Widget Image Flutter

Widget Image

Pemrograman Bergerak Flutter

Grafik merupakan hal yang menjadi ketertarikan dalam menggunakan sebuah produk, bisa dibayangkan kalau dalam lembaran informasi hanya tertera teks. Akan mudah bosan tentunya. Salah satu bentuk grafik adalah gambar ( image )

Dalam flutter untuk menampilkan gambar, bisa menggunakan widget Image.

Image( )

Beberapa properti muncul dan bisa dilakukan guna melakukan penyesuaian dengan kebutuhan pengembangan aplikasi.

Semisal menggunakan properti image

Menampilkan Gambar

Untuk menampilkan gambar dengan flutter, ada beberapa hal yang dilakukan terlebih dahulu. 

Langkah pertama, buat folder baru. Misalnya assets 

Folder ini harus sejajar berada di root projek

Setelah tercipta, akan nampak 

Buat folder lagi dalam /assets, dengan nama gambar

Dan simpan satu gambar di dalamnya

Gambar yang akan ditampilkan usahakan memiliki nama yang pendek

Kemudian, buka file pubspec.yaml

Lihat baris ke 61, hilangkan tanda komentarnya

Ganti dengan lokasi dan nama sesuai dengan yang ada di projek

Dalam projek contoh di artikel ini, lokasi gambar berada di /assets/gambar

Gambar bernama digiNOW.png

Kembali ke main.dart

Tambahkan perintah AssetImage dalam properti image, terlihat seperti dibawah ini

Jalankan dengan flutter run

Akan nampak sebuah gambar muncul di bagian body 

Berhasil?

Bisa juga menambahkan properti untuk mengatur lebar ( width ) dan tinggi ( height ) gambar

Perhatikan gambar berikut

Gambar di Internet

Dalam flutter bisa juga sebuah gambar diambil dari internet, perintahnya bukan dengan AssetImage 

Tetapi diganti dengan NetworkImage(url_gambar)

Misalnya

Ganti dengan teks "url" dengan alamat berikut

https://storage.googleapis.com/cms-storage-bucket/lockup_flutter_horizontal.c823e53b3a1a7b0d36a9.png

Menjadi

Jangan lupa gunakan petik, jalankan

Bisa?

Cukup sekian artikel kali ini yaaa, sampai jumpa lagi