Layout : Membuat Circle Icon Menggunakan Flutter

Layout : Membuat Circle Icon Menggunakan Flutter

Sobatcoding.com - Tutorial layout membuat circle Icon menggunakan flutter

Di flutter kalian bisa membuat widget circle icon atau icon yang di wrap menggunakan widget bentuk lingkaran dengan beberapa cara

Membuat Circle Icon Dengan CircleAvatar

Kalian bisa membuat circle icon menggunakan child dari widget CircleAvatar

const CircleAvatar(
            radius: 22.0,
            backgroundColor: Colors.redAccent,
            child: Icon(
              Icons.lock,
              color: Colors.white,
              size: 20.0,
            ),
          )

Untuk mengatur size CircleAvatar kita gunakan property radius.

 

Membuat Circle Icon Dengan Container ShapeDecoration

Kalian bisa membuat circle icon menggunakan widget ShapeDecoartion di dalam property decoration

Container(
            width: 45.0,
            height: 45.0,
            decoration: const ShapeDecoration(
              color: Colors.blue,
              shape: CircleBorder(),
            ),
            child: const Icon(
              Icons.lock,
              color: Colors.white,
              size: 20.0,
            ),
          )

property yang dipakai adalah shape: CircleBorder()

 

Membuat Circle Icon Dengan Container BoxDecoration 

Kalian bisa membuat circle icon menggunakan widget BoxDecoartion di dalam property decoration

Container(
            width: 45.0,
            height: 45.0,
            decoration: const BoxDecoration(
              color: Colors.teal,
              shape: BoxShape.circle,
            ),
            child: const Icon(
              Icons.lock,
              color: Colors.white,
              size: 20.0,
            ),
          )

property yang dipakai adalah shapeBoxShape.circle

 

Circle Icon Flutter - sobatcoding.com

Hasil dari flutter icon

 

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat