Beberapa Cara Membuat Widget Berbentuk Bulat (lingkaran) Di Flutter
Pada artikel ini saya akan merangkumkan beberapa cara yang dapat dilakukan untuk membuat sebuah widget yang berbentuk bulat, apa yang saya tulis disini berdasarkan pengalaman pribadi.
Sebagai seorang pengembang aplikasi kita sering menemui cases yang mengharuskan kita membuat tampilan atau UI yang berbentuk lingkaran seperti gambar dibawah ini, coba liat..
Bisa diliat ada beberapa komponen UI yang berbentuk bulat bukan? tentunya hal tersebut harus kita bisa achive kedalam code kita
Saat mengembangkan aplikasi kita sering mendapati UI dari UI/UX desainer yang mengharuskan kita membuat sesuatu yang berbentuk lingkaran, nah terkadang hal sepele seperti ini masih sering membuat kita (tepatnya saya sendiri dulu😅), masih harus membuka gugel untuk mencari cara bagaimana membuat widget yang berbentuk lingkaran, like this 😅
Mungkin hal yang sama juga terjadi pada temen-temen, oleh karena itu disini saya akan merangkumkan beberapa cara bagaimana membuat widget yang berbentuk lingkaran di flutter, jadi kalau misalkan kelupaan lagi temen-temen tinggal buka aja lagi artikel ini, ga perlu buka-buka gugel lagi ok?😆
Nah berikut beberapa cara yang sering saya gunakan ketika membuat widget atau tampilan yang berbentuk lingkaran
1. Menggunakan CircleAvatar
Pertama adalah dengan menggunakan widget CircleAvatar() ini adalah cara yang paling mudah diterapkan
Widget ini memiliki beberapa property seperti child, radius, backgroundImage dst,
Penggunaannya sangat simple kita hanya perlu menambahkan argument pada property child atau backgroundImage -nya saja dan tinggal atur ukurannya dengan property radius-nya.
Jika kita lihat di Flutter.dev description dari CircleAvatar ialah
“A circle that represents a user”.
Sehingga widget CircleAvatar() ini bertujuan untuk digunakan ketika kita ingin menampilkan hal yang berkaitan dengan user atau dalam hal foto profil user (avatar), meskipun kita juga bebas menggunakannya untuk hal lain, lihat contoh code dibawah 👀
Dengan backgroundImage
CircleAvatar(
backgroundImage: NetworkImage('YOUR_IMAGE_URL'),
radius: 50,
)CircleAvatar(
backgroundImage: AssetImage('YOUR_IMAGE_PATH'),
radius: 50,
)
Dengan child
CircleAvatar(
child: Text('1'),
backgroundColor: Colors.blue,
)Mudah bukan? … mudah sekali..
2. Menggunakan Container
Seperti description-nya di Flutter.dev Container adalah:
“A convenience widget that combines common painting, positioning, and sizing widgets”
Maksudnya container itu widget hasil dari gabungan beberapa hal gitu.. yang intinya kita dapat pakai untuk melakukan hal seperti painting, pengaturan posisi, atau pengaturan ukuran suatu widget
Nah yang pasti dengan container ini kita juga bisa membuat lingkaran, bagaimana caranya? yaitu dengan mengunakan properti decoration-nya
ada dua cara yang biasa saya gunakan yaitu dengan ShapeDecoration atau BoxDecoration yang kita jadikan sebagai argument di property decoration Container, caranya sebagai berikut:
Dengan ShapeDecoration
Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
color: Colors.blue,
shape: CircleBorder(),
),
),Dengan BoxDecoration
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),Mudah bukan? ... mudah sekali.. Lanjut…
3. Menggunakan ClipOval
Kita juga bisa membuat widget lingkaran dengan menggunakan widget ClipOval, cuman ini caranya aga sedikit tricky , sedikit penjelasannya
Behaviour dari ClipOval ini sebanarnya dia akan membuat anaknya atau child-nya berubah (diclip/dipotong) menjadi oval atau kata lainnya “lonjong” namun berdasarkan ukuran widget anaknya sehingga dia ga menjadikan bulat sempurna, cuma kita bisa ngakalin agar menjadi bulat sempurna yaitu dengan memberikan child yang berukuran persegi, silahkan coba aja contoh code dibawah
ClipOval(
child: Container(height: 100, width: 100, color: Colors.blue)
)4. Menggunakan Custom Paint
Widget berbentuk lingkaran juga bisa kita buat menggunakan CustomPaint yaitu dengan membuat class dari ekstensi class CustomPainter sebagai argument untuk properti painter pada CustomPaint, cara membuatnya lihat code dibawah.
NOTE
Dari beberapa contoh diatas penggunaannya akan sangat tergantung terhadap case kode yang kita buat, sehingga kita harus menentukan cara apa yang paling tepat untuk diterapkan.
PENUTUP
Mungkin sekian artikel pendek kali ini, bagi kawan-kawan yang mungkin punya cara lain saat membuat widget lingkaran silahkan tuliskan dibagian response artikel ini.
Terimakasih, Semoga bermanfaat…
