如何删除Flutter IconButton大填充?

时间:2018-05-16 23:08:21

标签: flutter flutter-layout

我希望有一排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: () {},
            )
          ],
        ),
      );
    }
}

enter image description here

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

我几乎可以确定这个空间是由按钮本身拍摄的,因为如果我将它们的对齐方式更改为centerRightcenterLeft,它们看起来像这样:

enter image description here

将实际图标设置得更小也没有帮助,按钮仍然很大:

enter image description here

感谢您的帮助

10 个答案:

答案 0 :(得分:19)

只需将一个空的1传递给BoxConstrains属性,并将其填充为零。

constraints

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

答案 1 :(得分:7)

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

您也可以半开始使用icon_button.dart源代码并制作自己的IconButton,它不遵循Material Design规范,因为整个文件只是组成其他小部件而且只有200行,大部分都是评论。

答案 2 :(得分:3)

这是一种解决方法,可以使用InkWell代替IconButton来消除任何多余的填充:

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

答案 3 :(得分:2)

您无需使用IconButton周围的填充物,而只需使用Icon并用GestureDetector或InkWell将其包装为

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

如果您需要波纹/墨水飞溅效果,如IconButton在单击时提供的那样,用InkWell包裹起来

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

尽管第二种方法在Icon上抛出的Ink不会像IconButton那样精确,但是您可能需要为此进行一些自定义实现。

答案 4 :(得分:1)

解决此问题的两种方法。

仍然使用IconButton

将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代替Shyju Madathil推荐的IconButton。

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

答案 5 :(得分:1)

我遇到了类似的问题,试图在用户触摸屏幕的位置渲染图标。不幸的是,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源代码非常容易实现,我强烈建议您深入研究!

答案 6 :(得分:0)

IconButton包装在容器中根本行不通,而是使用ClipRRect并用墨槽添加材质的Widget,只需确保为ClipRRect Widget提供足够的边框Radius border。

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

答案 7 :(得分:0)

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

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

答案 8 :(得分:0)

您可以使用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),
         ),

答案 9 :(得分:-1)

要显示飞溅效果(波纹),请使用InkResponse

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

如果需要,更改图标大小或添加填充:

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