Search code examples
fluttermarginiconbutton

IconButton takes too much space to the edge of screen

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: enter image description here

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.