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 shape: BoxShape.circle

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