如何删除Flutter IconButton大填充？

Question

我希望有一排IconButtons,它们彼此相邻,但实际图标和IconButton限制之间似乎有一个相当大的填充.我已经将按钮上的填充设置为0.

这是我的组件,非常简单:

class ActionButtons extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.lightBlue,
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(0.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            IconButton(
              icon: new Icon(ScanrIcons.reg),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            ),
            IconButton(
              icon: new Icon(Icons.volume_up),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            )
          ],
        ),
      );
    }
}

我想摆脱大部分淡蓝色空间,让我的图标在左边较早开始,并且彼此更接近,但我找不到调整IconButton本身大小的方法.

我几乎可以肯定这个空间是由按钮本身占据的,因为如果我改变它们的对齐方式centerRight,centerLeft它们看起来像这样:

将实际图标缩小也无济于事,按钮仍然很大:

谢谢您的帮助

Answer 1

只需将空值传递BoxConstrains给constraints属性并填充零。

IconButton(
    padding: EdgeInsets.zero,
    constraints: BoxConstraints(),
)

您必须传递空约束，因为默认情况下 IconButton 小部件假定最小大小为 48px。

Answer 2

2023年解决方案：

IconButton(
  onPressed: () {},
  iconSize: 40.0, // desired size
  padding: EdgeInsets.zero,
  constraints: const BoxConstraints(), // override default min size of 48px
  style: const ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap, // the '2023' part
  ),
  icon: const Icon(Symbols.arrow_right),
),

Answer 3

解决此问题的两种方法。

仍然使用IconButton

将IconButton包裹在具有宽度的容器中。

例如：

Container(
  padding: const EdgeInsets.all(0.0),
  width: 30.0, // you can adjust the width as you need
  child: IconButton(
  ),
),

使用GestureDetector代替IconButton

您也可以使用GestureDetector代替Shyju Madathil推荐的IconButton。

GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) ) 

Answer 4

并不是说那里有填充物.IconButton是一个Material Design小部件,遵循规范,每个侧面的可点击对象需要至少48px.您可以从任何IDE单击IconButton实现.

您还可以半开始使用icon_button.dart源代码并制作不符合Material Design规范的自己的IconButton,因为整个文件只是组成其他小部件而且只有200行主要是注释.

Answer 5

将 包裹IconButton在容器中根本行不通，而是使用ClipRRect并添加带有 Inkwell 的材质 Widget，只需确保为ClipRRect小部件提供足够的边框 Radius 即可。

ClipRRect(
    borderRadius: BorderRadius.circular(50),
    child : Material(
        child : InkWell(
            child : Padding(
                padding : const EdgeInsets.all(5),
                child : Icon(
                    Icons.favorite_border,
                    ),
                ),
            onTap : () {},
            ),
        ),
    )

Answer 6

您可以简单地使用 Icon 并用 GestureDetector 或 InkWell 包裹它，而不是删除 IconButton 周围的填充，如下所示

GestureDetector(
   ontap:(){}
   child:Icon(...)
);

如果您想要 IconButton 在单击时提供的波纹/墨水飞溅效果，请使用 InkWell 包裹它

InkWell(
   splashColor: Colors.red,
   child:Icon(...)
   ontap:(){}
)

尽管第二种方法中在图标上抛出的 Ink 不会像 IconButton 那样准确，但您可能需要为此执行一些自定义实现。