如何删除 Flutter IconButton 大填充？答案

【问题标题】：How do I remove Flutter IconButton big padding?如何删除 Flutter IconButton 大填充？
【发布时间】：2018-10-27 02:45:09
【问题描述】：

我想要一排 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，它们看起来像这样：

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

感谢您的帮助

【问题讨论】：

你试过让你的实际图标变大吗？看起来图标可能居中，但没有填满，它是图标字体字形中的空间。
使用 GestureDetector( onTap: () {}, child: new Icon(Icons.volume_up) )

标签： flutter button flutter-layout flutter-widget iconbutton

【解决方案1】：

只需将一个空的BoxConstrains 传递给constraints 属性和一个零填充。

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

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

【讨论】：

填充：EdgeInsets.zero，它的工作但得到约束错误：BoxConstraints()，
你拯救了我的一天（和我的应用程序！：D）
这应该是一个可以接受的答案！

【解决方案2】：

解决此问题的两种方法。

仍然使用图标按钮

将 IconButton 包裹在一个有宽度的 Container 中。

例如：

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

使用 GestureDetector 代替 IconButton

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

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

【讨论】：

谢谢！这非常适合我:)
完美的发现
InkWell 如果你想模仿平面按钮
受到IconButton 约束的hack 真是太棒了

【解决方案3】：

那里没有填充物。 IconButton 是一个 Material Design 小部件，它遵循可点击对象需要为 at least 48px on each side. 的规范。您可以从任何 IDE 中单击进入 IconButton 实现。

您也可以简单地获取 icon_button.dart 源代码并制作自己的 IconButton，它不遵循 Material Design 规范，因为整个文件只是组成其他小部件并且只有 200 行，大部分是 cmets。

【讨论】：

【解决方案4】：

将IconButton 包装在一个容器中根本行不通，而是使用ClipRRect 并添加一个带有Inkwell 的材质小部件，只需确保为ClipRRect 小部件提供足够的边框半径?。

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

【讨论】：

不错的解决方案，它让我意识到 ClipRRect 小部件和系列。 :)

【解决方案5】：

这是一个摆脱任何额外填充的解决方案，使用InkWell 代替IconButton：

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

【讨论】：

【解决方案6】：

您可以简单地使用图标并用 GestureDetector 或 InkWell 包装它，而不是删除 IconButton 周围的填充

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

如果您想要图标按钮在单击时提供的波纹/墨水飞溅效果，请使用 InkWell 包装它

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

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

【讨论】：

【解决方案7】：

我在尝试在用户触摸屏幕的位置渲染图标时遇到了类似的问题。不幸的是，Icon 类将您选择的图标包装在 SizedBox 中。

阅读一点 Icon 类的源代码，发现每个 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,
        ),
      ),
    );

因此，例如，如果我想渲染 Icons.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
      ),
    );

Dart/Flutter 源代码非常平易近人，我强烈建议深入研究一下！

【讨论】：

【解决方案8】：

更好的解决方案是像这样使用Transform.scale：

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

【讨论】：

【解决方案9】：

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

ListTile(
         leading: Icon(Icons.add), //Here Is The Icon You Want To Use
         title: Text('GFG title',textScaleFactor: 1.5,), //Here Is The Text Also
         trailing: Icon(Icons.done),
         ),

【讨论】：

【解决方案10】：

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

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

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

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

【讨论】：

在问题的任何地方都没有要求显示涟漪效应！
@Ashish，IconButton 暗示有涟漪效应。如果你不需要涟漪效应，你可以使用 GestureDetector。这很简单，并显示在最佳答案中。我的解决方案允许删除填充但保留 IconButton-like 波纹