How to make a button in Flutter have the same shape as its icon?

Question

I am trying to create a backspace button (using an ElevatedButton() ). I don't want the button to be circular, but instead have the same shape as the icon. Also, when tapping the button, I want the splash effect to be the same size and shape as the button.

I've attached a reference image below of the shape I'm trying to replicate.

Extra challenge: I'm also trying to set the fill color of the button to be black and the color of the button to be grey (like the example).

Answer 1

You can use the IconButton() widget instead of ElevtaedButton() as well as defining the splashRadius to change the size of the splash effect:

IconButton(
            splashRadius: 1, // Set the Size of the splash area
            color: Colors.grey,
            icon: Icon(Icons.backspace),
            onPressed: () {},
          ),

Result:

Or, if you want to use ElevatedButton() , use the .icon constructor:

 ElevatedButton.icon(
            style: ElevatedButton.styleFrom(primary: Colors.grey.shade300),
            label: Text('Hello World'),
            icon: Icon(
              Icons.backspace,
              color: Colors.grey,
            ),
            onPressed: () {},
          )

Result:

Answer 2

There are many default icons in class Icons are not good-looking for your app. You can use some design platform, such as Figma, then download it as svg . Then the code could be:

InkWell(
  onTap: () {},
  child: SvgPicture.asset(path_to_svg_icon)
)

This way, you can edit color, shape, style... for your icon. Good luck!