close

How to create a circle icon button in Flutter?

Hello Guys How are you all ? Hope you all are fine. Today in this tutorial we are going to learn How to create a circle icon button in Flutter? Here we will discuss all possible methods to create a circle icon button in flutter. so let’s get started without wasting your time.

How to create a circle icon button in Flutter?

  1. How to create a circle icon button in Flutter?

    To create a circle icon button in Flutter ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example. MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.

  2. create a circle icon button in Flutter

    To create a circle icon button in Flutter ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example. MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.

1. create a circle icon button using ElevatedButton Widget.

ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example.

Example Source Code.

        child: Center(
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              shape: CircleBorder(),
              padding: EdgeInsets.all(30),
            ),
            child: Icon(
              Icons.android_outlined,
              size: 50,
            ),
            onPressed: () {},
          ),
        ),

Output.

create a circle icon button using ElevatedButton Widget.

2. create a circle icon button using MaterialButton Widget.

MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.

Example Source Code.

        child: Center(
          child: MaterialButton(
            shape: CircleBorder(),
            color: Colors.green,
            padding: EdgeInsets.all(20),
            onPressed: () {},
            child: Icon(
              Icons.android_outlined,
              size: 50,
              color: Colors.white,
            ),
          ),
        ),

Output.

create a circle icon button using MaterialButton Widget.

3. create a circle icon button using ClipOval Widget.

We are going to use ClipOval widget. Here is an example.

Example Source Code.

        child: Center(
          child: ClipOval(
            child: Material(
              color: Colors.blue,
              child: InkWell(
                onTap: () {},
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Icon(
                    Icons.android_outlined,
                    size: 50,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),

Output.

create a circle icon button using ClipOval Widget.

4. create a circle icon button using CircleAvatar Widget.

CircleAvatar has radius property so we can easily give radius to our CircleAvatar. Here is an example.

Example Source Code.

        child: Center(
          child: CircleAvatar(
            radius: 50,
            backgroundColor: Colors.green,
            child: IconButton(
              color: Colors.white,
              padding: EdgeInsets.all(20),
              iconSize: 50,
              icon: Icon(Icons.android_outlined),
              onPressed: () {},
            ),
          ),
        ),

Output.

 create a circle icon button using CircleAvatar Widget.

5. create a circle icon button using Ink Widget.

Ink has decoration and we can assign decoration as ShapeDecoration property which has shape property so we can easily shape our Ink widget. Here is an example.

Example Source Code.

        child: Center(
          child: Ink(
            decoration: ShapeDecoration(
              shape: CircleBorder(),
              color: Colors.green,
            ),
            child: IconButton(
              icon: Icon(Icons.android_outlined),
              iconSize: 50,
              color: Colors.white,
              onPressed: () {},
            ),
          ),
        ),

Output.

create a circle icon button using Ink Widget.

Summery

So, It’s All About this tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: