DEV Community


Posted on • Originally published at

How do i make circular icon Inside Button ?

We can create Flutter Circular image using the Container with decoration property, but how to create circular icon.

In this example you can find to create circular icon inside button.

  onPressed: () {
  child: Icon(Icons.edit, color: Colors.white),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(2),
    primary:, // <-- Button color
    onPrimary:, // <-- Splash color
Enter fullscreen mode Exit fullscreen mode

In the above example we used Button style property with ElevatedButton and added shape as CircleBorder()

This will return an circular edit icon with elevation property.

Flutter Circular Icon

Discussion (0)