How to resize (height and width) of an IconButton in Flutter

Question

How to resize (height and width) of an IconButton in Flutter? Seems like it takes a default width and height. There is not height or width property.

new IconButton(
    padding: new EdgeInsets.all(0.0),
    color: themeData.primaryColor,
    icon: new Icon(Icons.clear, size: 18.0),
    onPressed: onDelete,
)

Answer 1

You can force it to size itself with the SizedBox.

SizedBox(
   height: 18.0,
   width: 18.0,
   child: IconButton(
      padding: EdgeInsets.all(0.0),
      color: themeData.primaryColor,
      icon: Icon(Icons.clear, size: 18.0),
      onPressed: onDelete,
   )
)

Answer 2

There is a newer way than the accepted answer. It looks like this:

IconButton(
  iconSize: 18.0,
  icon: new Icon(Icons.clear)

So use iconSize attribute and get rid of the SizedBox.

I noticed the old accepted solution had a bad drawing effect when pressing the button.

Answer 3

You can replace IconButton with InkWell:

InkWell(
    child: Icon(Icons.clear, size: 18.0, color: themeData.primaryColor),
    onTap: onDelete,
),

Answer 4

Use the constraints property on IconButton and padding to zero:

IconButton(
    constraints: BoxConstraints(maxHeight: 36),
    icon: new Icon(Icons.clear, size: 18.0),
    padding: EdgeInsets.zero,
)

Source

Answer 5

If anyone's looking to change the Splash/Hover shadow size for the icon buttons. You need to set splashRadius property to the desired value in the IconButton.

IconButton(
     splashRadius: 12,
     padding: EdgeInsets.zero,
     icon: Icon(
             Icons.visibility,
              color: Theme.of(context).primaryColorDark,
    ),
)

Answer 6

Use IconButton > splashRadius,

IconButton(
  // use this to decrease/increase the splash spacing
  splashRadius: 24.0,  // (Material.defaultSplashRadius = 35.0)
  color: buttonColor,
  icon: Icon(Icons.heart),
  onPressed: () {},
);

Answer 7

IconButton's hit region is the area that can perceive user interaction, it has the smallest size is kMinInteractiveDimension (48.0) regardless of the actual size of the Icon.

Answer 8

I think there is a better way

1. Set the style -> tapTargetSize: MaterialTapTargetSize.shrinkWrap
2. Set the desired size with constraints
3. Adjust the padding

.

IconButton(
  // To make the button size adjust to the icon or the desired size.
  // Without this it will still use its default size.
  style: const ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  // Set the desired size
  constraints: BoxConstraints(
    maxWidth: 30,
    minWidth: 30,
    maxHeight: 30,
    minHeight: 30,
  ),
  // Don't forget the padding
  padding: EdgeInsets.zero,
  icon: Icon(Icons.remove),
  iconSize: Sizes.height22,
  onPressed: () {},
)

Answer 9

If you use images from assets folder, below should work:

IconButton(
      icon: Image.asset(
        "assets/images/play_3x.png",
        height: 100,
        width: 100,
        color: Colors.white,
)

Answer 10

You need three things

1. set padding to 0
2. set the size you want for the icon button using the constraints property
3. control your icon size inside IconButton using the size property in Icon

//

IconButton(
        onPressed: () {},
        padding: EdgeInsets.zero, //1
        constraints: BoxConstraints(maxHeight: 24.0, maxWidth: 24.0), //2
        icon: Icon(
          Icons.keyboard_arrow_down_rounded,
          size: 18.0, //3
        ),
      ),