[英]How to make a button in Flutter have the same shape as its icon?
I am trying to create a backspace button (using an ElevatedButton()
).我正在尝试创建一个退格按钮(使用
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).额外挑战:我还尝试将按钮的填充颜色设置为黑色,将按钮的颜色设置为灰色(如示例)。
You can use the IconButton()
widget instead of ElevtaedButton()
as well as defining the splashRadius
to change the size of the splash effect:您可以使用
IconButton()
小部件而不是ElevtaedButton()
以及定义splashRadius
来更改飞溅效果的大小:
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
构造函数:
ElevatedButton.icon(
style: ElevatedButton.styleFrom(primary: Colors.grey.shade300),
label: Text('Hello World'),
icon: Icon(
Icons.backspace,
color: Colors.grey,
),
onPressed: () {},
)
Result:结果:
There are many default icons in class Icons
are not good-looking for your app.类
Icons
中有很多默认图标不适合您的应用。 You can use some design platform, such as Figma, then download it as svg
.您可以使用一些设计平台,例如 Figma,然后将其下载为
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!
祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.