Flutter 如何移除大填充物上的颤振图标按钮？

我希望有一排图标按钮，它们彼此相邻，但在实际图标和图标按钮限制之间似乎有很大的填充。我已经将按钮上的填充设置为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: () {},
            )
          ],
        ),
      );
    }
}

class ActionButtons扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
颜色：颜色。浅蓝色，
边距：所有常数边集（0.0），
填充：常量边集全部（0.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
图标按钮(
图标：新图标（ScanrIcons.reg），
对齐：对齐.center，
填充：新边集。全部（0.0），
按下：（）{}，
),
图标按钮(
图标：新图标（图标。音量增大），
对齐：对齐.center，
填充：新边集。全部（0.0），
按下：（）{}，
)
],
),
);
}
}

我想去掉大部分浅蓝色的空间，让我的图标在左边更早地开始，并且彼此更靠近，但是我找不到调整图标按钮本身大小的方法

我几乎可以肯定这个空间是由按钮本身占据的，因为如果我将它们的对齐方式更改为

centerRight

和

centerLeft

它们看起来是这样的：

Widget _pointer = Text(
      String.fromCharCode(Icons.details.codePoint),
      style: TextStyle(
        fontFamily: Icons.details.fontFamily,
        package: Icons.details.fontPackage,
        fontSize: 24.0,
        color: Colors.black
      ),
    );

 Transform.scale(
   scale: 0.5, // set your value here
   child: IconButton(icon: Icon(Icons.smartphone), onPressed: () {}),
 )

使实际图标变小也无济于事，按钮仍然很大：

---

谢谢你的帮助

这里并没有填充物。IconButton是一个材质设计小部件，它遵循tappable对象所需的规范。您可以从任何IDE单击IconButton实现

---

您还可以简单地使用icon_button.dart源代码，创建自己的IconButton，它不遵循材质设计规范，因为整个文件只包含其他小部件，只有200行，其中大部分是注释。

解决此问题的两种方法

仍然使用图标按钮 将图标按钮包裹在一个具有一定宽度的容器中

例如：

容器(
填充：常量边集全部（0.0），
宽度：30.0，//您可以根据需要调整宽度
孩子：我的钮扣(
),
),

使用手势检测器代替图标按钮 您还可以使用GestureDetector代替Shyju Madathil推荐的图标按钮

GestureDetector（onTap:（）{}，子对象：图标（Icons.volume\u up））

我在试图在用户触摸屏幕的位置渲染图标时遇到了类似的问题。不幸的是，

图标

类将您选择的图标包装在一个

大小框

中

阅读一点Icon类源代码，发现每个图标都可以被视为文本：

Widget iconWidget = RichText(
      overflow: TextOverflow.visible,
      textDirection: textDirection,
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          inherit: false,
          color: iconColor,
          fontSize: iconSize,
          fontFamily: icon.fontFamily,
          package: icon.fontPackage,
        ),
      ),
    );

因此，例如，如果我想渲染

图标.details

来指示我的用户刚刚指向的位置，没有任何边距，我可以这样做：

Widget _pointer = Text(
      String.fromCharCode(Icons.details.codePoint),
      style: TextStyle(
        fontFamily: Icons.details.fontFamily,
        package: Icons.details.fontPackage,
        fontSize: 24.0,
        color: Colors.black
      ),
    );

 Transform.scale(
   scale: 0.5, // set your value here
   child: IconButton(icon: Icon(Icons.smartphone), onPressed: () {}),
 )

Dart/FLATTER源代码非常容易理解，我强烈建议您深入了解一下

要显示飞溅效果（波纹），请使用

InkResponse

：

InkResponse(
  Icon(Icons.volume_up),
  onTap: ...,
)

如果需要，更改图标大小或添加填充：

InkResponse(
  child: Padding(
    padding: ...,
    child: Icon(Icons.volume_up, size: ...),
  ),
  onTap: ...,
)

---

将

IconButton

包装在容器中根本不起作用，而是使用并添加一个带有墨水池的材质小部件，只需确保为

ClipRRect

小部件提供足够的边界半径更好的解决方案是使用

Transform.scale

如下：

Widget _pointer = Text(
      String.fromCharCode(Icons.details.codePoint),
      style: TextStyle(
        fontFamily: Icons.details.fontFamily,
        package: Icons.details.fontPackage,
        fontSize: 24.0,
        color: Colors.black
      ),
    );

 Transform.scale(
   scale: 0.5, // set your value here
   child: IconButton(icon: Icon(Icons.smartphone), onPressed: () {}),
 )

---

您可以简单地使用一个图标并用手势检测器或墨水池将其包裹起来，而不是移除图标按钮周围的填充

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

如果您想要IconButton在单击时提供的涟漪/墨水飞溅效果，请使用墨水池将其包裹

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

---

虽然在第二种方法中，图标上的墨水不会像图标按钮那样精确，但您可能需要为此进行一些自定义实现。

这里有一个解决方案，可以使用

InkWell

代替

IconButton

：

Widget backButtonContainer = InkWell(
    child: Container(
      child: const Icon(
        Icons.arrow_upward,
        color: Colors.white,
        size: 35.0,
      ),
    ),
    onTap: () {
      Navigator.of(_context).pop();
    });

---

只需将一个空的

框constraints

传递给

constraints

属性，并将填充为零

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

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

您可以使用ListTile，它在文本和图标之间提供了一个符合您需要的默认空间。

---

你试过把你的图标放大吗？看起来图标可能居中，但没有填满图标字体图示符中的空间。使用GestureDetector（onTap:（）{}，child:new icon（Icons.volume_up））谢谢！这对我来说非常合适：）完美曾经发现如果你试图模仿一个平面按钮，使用

IconButton

的约束进行黑客攻击真的很有用添加：EdgeInsets.zero，它工作正常，但得到了约束错误：BoxConstraints（），这应该是公认的答案！很好，谢谢。从我的角度来看，这是最简单最短的解决方案。对我来说很有效。。谢谢，工作了。。谢谢，这是一个很好的解决方案，它让我了解了ClipRect小部件和系列在这个问题上，没有人要求它显示连锁反应@Ashish，IconButton意味着具有连锁反应。若你们不需要涟漪效应，你们可以使用手势检测器。这很简单，并显示在顶部的答案。我的解决方案允许删除填充，但保持图标按钮般的波纹