Image Load

Hello world,

Menampilkan gambar/image bisa dengan berbagai bentuk sesuai dengan tema yang diinginkan. Salah satunya adalah menampilkan dalam bentuk rounded (memiliki radius) atau bahkan berbentuk lingkaran. Jika tanpa merubah style maka gambar akan ditapilkan apa adanya yaitu kotak persegi atau persegi panjang. Lalu bagaimana jika kita ingin menampilkan dengan bentuk rounded? Ada beberapa cara yang bisa digunakan dalam flutter. Untuk yang saya contohkan di sini adalah cara yang biasa saya gunakan yaitu dengan Container atau dengan ClipRRect. 

Oke untuk yang pertama di sini adalah contoh image jika tampa merubah style biasanya seperti berikut.

new Image.asset('assets/image01.jpg', width: 100.0,)

Nah bagaimana kalau gambarnya kita ambil dari online atau website lain?. Begini caranya.

new Image(image: NetworkImage("http://code.byriza.com/lib/blog/flutter222.png"),),

Contoh pertama kita buat rounded dengan menggunakan Container, yaitu sebagai berikut:

Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
image: DecorationImage(
image: AssetImage('assets/flutter.png'),
fit: BoxFit.cover,
),
),
),

Hasilnya seperti berikut:




Lalu yang kedua kita coba buat gambar berbentuk lingkaran dan asset yang berasal dari url online.

Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
image: DecorationImage(
image: NetworkImage('https://www.byriza.com/lib/blog/1586938494.png'),
fit: BoxFit.cover,
),
),
),

Hasilnya seperti berikut :


Kemudian contoh ketiga kita coba pakai ClipRRect.

ClipRRect(
borderRadius: new BorderRadius.circular(30),
child: Image.asset(
"assets/flutter.png",
height: 200,
width: 200,
fit: BoxFit.cover,
),
)

Hasilnya akan menjadi seperti berikut:



Apa perbedaanya? bedaya hanya pada widgetnya saja dimana Container punya lebih banyak attribute yang bisa dipakai seperti BoxShadow dll yang tidak dimiliki ClipRRect. Lalu mana yang lebih bagus untuk dipakai? Tergantung kebutuhan. Saya lebih menyesuaikan kebutuhan dalam penggunaan widget. kalau memang dengan ClipRRect sudah cukup maka saya akan pakai ClipRRect. Tapi kalau butuh attribute lebih banyak maka saya akan pakai Container atau cari widget lain. Begitu kira-kira.


Selamat mencoba :)