IconButton takes too much space to the edge of screen

Issue

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

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.

Answered By - Nisanth Reddy