IconButton takes too much space to the edge of screen

Question

IconButton takes too much space to the edge of screen. This is how I made it:

return Scaffold(
  body: Column(
    children: [
      Container(
        margin: EdgeInsets.all(20),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [ 
          Row(
             children: <Widget>[
               Expanded(child: Input()),
               IconButton(
                icon: const Icon(Icons.cancel),
                onPressed: () {},
               ),
             ],
        ), ...

It looks like:

How to fix it to make icon closer to the margin edge?

score 3 · Answer 1 · answered May 17 '21 at 06:59

I usually use GestureDetector or InkWell for such cases, as they offer more size adjustments if given container as child. You can give Icon as child to either of these.

InkWell(
     child: const Icon(Icons.cancel),
     onTap: () {},
)

Or

InkWell(
     child: Container(child : Icon(Icons.cancel), height: 24.0, width: 24.0),
     onTap: () {},
)

score 2 · Accepted Answer · answered May 16 '21 at 13:23

What you are looking for is the constraints parameter on the IconButton.

You can use it like this.

constraints: BoxConstraints.tight(Size(24, 24))

Information on how to easily solve these problems can be obtained by checking the internal documentation of your IconButton.

If you cmd + click on the IconButton and check it's build method, you will see that it is using a ConstrainedBox to decide it's size based on some factors.

One such factor is the constraints that we pass to the Widget.

score 0 · Answer 3 · answered May 16 '21 at 11:16

0

Have you tried to set padding to zero?

IconButton(
      padding: EdgeInsets.zero,
      ...
    );

answered May 16 '21 at 11:16

Ara Kurghinyan

147
4

try to make icon size smaller, I think that its constraints are bigger than the icon size. – Ara Kurghinyan May 16 '21 at 11:25
the icon is small enaugh – rozerro May 16 '21 at 11:31
when you make it smaller does it align to center? – Ara Kurghinyan May 16 '21 at 11:33

score 0 · Answer 4 · answered Apr 12 '22 at 07:20

0

You can manipulate it's size and space taken with 4 parameters :

 IconButton(
  padding: EdgeInsets.zero,
  iconSize: 20,
  splashRadius: 16,
  onPressed: () {
    /// do sth
  },
  icon: const Icon(
  Icons.edit, color: Colors.orange)
)

answered Apr 12 '22 at 07:20

Zebromalz

31
3

IconButton takes too much space to the edge of screen

4 Answers4

Linked