Question 76692 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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)
enter image description here

Required Output(Container in Slidable children)
enter image description here

Tags:

2

Answers


  1. 0

    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,
                        ),
                      );
                    },
                  ),
                ],
              ),
    Login or Signup to reply.
  2. 0

    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: () {},
      ),
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search