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?

Answer 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.

Answer 2

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)
)

Answer 3

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

Answer 4

Have you tried to set padding to zero?

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