Memberikan corner radius pada widget image dapat membuat tampilan UI UX design menjadi lebih harmonis dikarenakan lekukan yang sederhana pada widget image tersebut. Kali ini kita akan belajar bagaimana caranya menambahkan corner radius flutter pada image dengan langkah yang mudah untuk dipelajari, let’s get started.
1) Widget image
Mari kita coba bikin dummy image terlebih dahulu, kali ini asset image-nya saya ambil dari projek local, kamu juga boleh menggunakan image network yang fotonya bisa diambil dari unsplash, pixabay, atau website lainnya.
Image.asset('assets/cover1.png',width: 140, height: 110,),
2) Bungkus dengan ClipRRect
ClipRRect adalah class bawaan Flutter yang membantu mobile developer untuk membungkus widget lain seperti container atau image demi menambahkan sebuah rounded corner pada widget tersebut, mari kita coba tulis kodingannya seperti berikut:
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
child: Image.asset(
'assets/cover1.png',
width: 140,
height: 110,
),
),Jika kita lihat kodingan di atas maka widget image yang kita miliki sebelumnya telah berhasil dibungkus oleh ClipRRect, kita juga mengatur ukuran radius tersebut kepada 12 pixel, tentunya teman-teman bisa mengatur sudut lain seperti bottomLeft atau bottomRight dengan nilai pixel yang berbeda dan sesuai kebutuhan design aplikasi kalian.
Tampilan UI wajib kita perhatikan
Well, sebagai flutter developer, kamu tidak harus jago UI UX design tapi setidaknya bisa meningkatkan sesuatu yang dapat membuat tampilan terlihat lebih menarik dan membuat pengguna nyaman menggunakan aplikasi kita. Selanjutnya kita bahas tutorial flutter apa lagi ya? oiya silahkan nikmati kelas flutter gratis yang tersedia di BuildWithAngga.
