Penggunaan Image di Flutter

April 7, 2023

Gambar merupakan bagian penting dalam meningkatkan tampilan dan pengalaman pengguna pada aplikasi mobile yang dibuat dengan Flutter. Ada dua widget yang dapat digunakan untuk menampilkan gambar pada aplikasi Flutter, yaitu Image.asset dan Image.network. Pada artikel ini, kita akan membahas penggunaan kedua widget tersebut.

Image.asset

Widget Image.asset digunakan untuk menampilkan gambar yang disimpan secara lokal di dalam aplikasi Flutter. Gambar yang digunakan pada widget ini harus disimpan dalam folder ‘assets’ pada proyek Flutter. Berikut adalah contoh penggunaan widget Image.asset:

Image.asset('assets/images/gambar.png')

Kita dapat mengatur lebar dan tinggi gambar menggunakan atribut width dan height seperti berikut:

Image.asset('assets/images/gambar.png', width: 200, height: 200)

Kita juga dapat menambahkan atribut fit untuk menentukan bagaimana gambar ditampilkan pada widget. Ada beberapa nilai fit yang dapat digunakan, antara lain:

BoxFit.fill: gambar akan di-stretch untuk mengisi seluruh ruang yang tersedia.
BoxFit.contain: gambar akan diatur agar seluruhnya tertampung dalam widget, tanpa mengubah proporsi aslinya.
BoxFit.cover: gambar akan diatur agar seluruhnya tertutup oleh widget, tanpa menampilkan area kosong pada salah satu sisi.
BoxFit.fitWidth: gambar akan diatur agar lebar gambar sesuai dengan lebar widget, tanpa mengubah proporsi aslinya.
BoxFit.fitHeight: gambar akan diatur agar tinggi gambar sesuai dengan tinggi widget, tanpa mengubah proporsi aslinya.

Berikut adalah contoh penggunaan atribut fit pada widget Image.asset:

Image.asset('assets/images/gambar.png', width: 200, height: 200, fit: BoxFit.cover)

Image.network

Widget Image.network digunakan untuk menampilkan gambar yang diambil dari sumber eksternal seperti internet. Kita dapat memasukkan URL gambar yang ingin ditampilkan menggunakan widget ini. Berikut adalah contoh penggunaan widget Image.network:

Image.network('https://example.com/gambar.png')

Kita juga dapat mengatur lebar dan tinggi gambar serta atribut fit pada widget Image.network, sama seperti penggunaan widget Image.asset.

Dengan menggunakan widget Image.asset dan Image.network pada aplikasi Flutter, pengembang dapat menampilkan gambar dengan mudah dan efisien.