How to customize SlidableAction to look like a round button in flutter?

Question

I was able to add rounded corners but could not figure out how to reduce the default padding and make it a round button.

      SlidableAction(
            onPressed: (context) {
              // do something
            },
            autoClose: true, // I need this functionality
            icon: FeatherIcons.copy,
          ),

Current Output (SlidableAction)

Required Output(Container in Slidable children)

Answer 1

You could try and use ElevatedButton instead of Slidable Action , I will share example code

 ActionPane(
                motion: ScrollMotion(),
                children: [
              
                  Builder(
                    builder: (cont) {
                      return ElevatedButton(
                        onPressed: () {
                          Slidable.of(cont)!.close();
                        },
                        style: ElevatedButton.styleFrom(
                          shape: CircleBorder(),
                          backgroundColor: Colors.red,
                          padding: EdgeInsets.all(10),
                        ),
                        child: const Icon(
                          Icons.delete,
                          color: Colors.white,
                          size: 25,
                        ),
                      );
                    },
                  ),
                ],
              ),

Answer 2

There's multiple ways to achieve that You can use the shape: CircleBorder()

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
  child: Icon(
    Icons.camera_alt,
    size: 24,
  ),
  padding: EdgeInsets.all(16),
  shape: CircleBorder(),
)

OR

You can use circle avatar

CircleAvatar(
      backgroundColor: Colors.blue,
      radius: 20,
      child: IconButton(
        padding: EdgeInsets.zero,
        icon: Icon(Icons.add),
        color: Colors.white,
        onPressed: () {},
      ),
    ),