如何删除Flutter IconButton大填充? [英] How do I remove Flutter IconButton big padding?

问题描述

我希望有一排IconButton彼此相邻，但是实际图标和IconButton限制之间似乎有很大的间隔.我已经将按钮的填充设置为0.

I want to have a row of IconButtons, all next to each other, but there seems to be a pretty big padding between the actual icon, and the IconButton limits. I've already set the padding on the button to 0.

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

This is my component, pretty straightforward:

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本身大小的方法.

I want to get rid of most of the light blue space, have my icons start earlier on the left, and closer to each other, but I can't find the way to resize the IconButton itself.

我几乎可以确定此空间是由按钮本身占用的，因为如果我将其对齐方式更改为centerRight和centerLeft，它们将如下所示:

I'm almost sure this space is taken by the button itself, 'cause if I change their alignments to centerRight and centerLeft they look like this:

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

Making the actual icons smaller doesn't help either, the button is still big:

感谢您的帮助

推荐答案

不是很多，那里有填充. IconButton是一个Material Design小部件，其遵循的规范是，可点击对象必须为

It's not so much that there's a padding there. IconButton is a Material Design widget which follows the spec that tappable objects need to be at least 48px on each side. You can click into the IconButton implementation from any IDEs.

您还可以半简单地获取icon_button.dart源代码，并制作自己的IconButton，该按钮不符合Material Design规范，因为整个文件仅由其他小部件组成，只有200行，大部分是注释.

You can also semi-trivially take the icon_button.dart source-code and make your own IconButton that doesn't follow the Material Design specs since the whole file is just composing other widgets and is just 200 lines that are mostly comments.

这篇关于如何删除Flutter IconButton大填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！