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

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).

CodePudding user response：

You can use the

Or, if you want to use ElevatedButton(), use the

CodePudding user response：

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!