5 Ways To Create Circle Icon Buttons in Flutter

Last updated on January 12, 2021 The Frog Loading... Post a comment

There are many ways to create the circle icon button in Flutter. Each of the examples below will use a different method.

Example 1: Using ElevatedButton + Icon (recommended)

The code:

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

Output:

Example 2: Using MaterialButton

The code:

MaterialButton(
        shape: CircleBorder(),
        color: Colors.red,
        padding: EdgeInsets.all(20),
        onPressed: () {},
        child: Icon(
          Icons.star,
          size: 50,
          color: Colors.yellow,
        ),
      )

Output:

Example 3: ClipOval + Material + InkWell + Padding + Icon

The code:

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

Output:

Example 4: IconButton + CircleAvatar

The code:

CircleAvatar(
          radius: 50,
          backgroundColor: Colors.amber,
          child: IconButton(
              color: Colors.black,
              padding: EdgeInsets.all(20),
              iconSize: 50,
              icon: Icon(Icons.shop),
              onPressed: () {
              // do something
              }),
        ),

Output:

Example 5: Ink + IconButton

The code:

Ink(
        decoration:
            ShapeDecoration(shape: CircleBorder(), color: Colors.purple),
        child: IconButton(
          icon: Icon(Icons.arrow_back),
          iconSize: 30,
          color: Colors.white,
          onPressed: () {},
        ),
      )

Output:

Above are examples of how to create the circle icon button in Flutter. Hope they help you in some way. Continue learning more about Flutter with the following articles:

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x