DEV Community

rrtutors
rrtutors

Posted on • Originally published at rrtutors.com

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.

ElevatedButton(
  onPressed: () {
    _pickImage();
  },
  child: Icon(Icons.edit, color: Colors.white),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(2),
    primary: Colors.blue, // <-- Button color
    onPrimary: Colors.red, // <-- 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)