如何使 Flutter 中的按钮与图标的形状相同？

Question

我正在尝试创建一个退格按钮（使用ElevatedButton() ）。 我不希望按钮是圆形的，而是与图标具有相同的形状。 此外，当点击按钮时，我希望飞溅效果与按钮的大小和形状相同。

我在下面附上了我要复制的形状的参考图像。

额外挑战：我还尝试将按钮的填充颜色设置为黑色，将按钮的颜色设置为灰色（如示例）。

Answer 1

您可以使用IconButton()小部件而不是ElevtaedButton()以及定义splashRadius来更改飞溅效果的大小：

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

结果：

或者，如果您想使用ElevatedButton() ，请使用.icon构造函数：

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

结果：

Answer 2

类Icons中有很多默认图标不适合您的应用。 您可以使用一些设计平台，例如 Figma，然后将其下载为svg 。 那么代码可能是：

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

这样，您可以为您的图标编辑颜色、形状、样式...。 祝你好运！