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?

Solution 1

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.

Solution 2

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: () {},
)

Comments

[Ara Kurghinyan]

try to make icon size smaller, I think that its constraints are bigger than the icon size.

[rozerro]

the icon is small enaugh

[Ara Kurghinyan]

when you make it smaller does it align to center?