Beberapa Cara Membuat Widget Berbentuk Bulat (lingkaran) Di Flutter

M. Sulthan Al Ihsan
4 min readNov 2, 2020

--

Photo by Rod Long on Unsplash

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..

https://dribbble.com/shots/3714778-Login-Screen-UI
https://www.behance.net/gallery/64368989/Contact-Friend-List-UI

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 😅

Saking seringnya sampai-sampai semua sudah dibuka 😆

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

Ini adalah avatar — eng

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

Photo by frank mckenna on Unsplash

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

Photo by Daniele Levis Pelusi on Unsplash

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

Photo by Anna Kolosyuk on Unsplash

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…

--

--