CODEWITHSUNDEEP
flutter
Steph
Steph

Reputation: 12182

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

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

Upvotes: 85

Views: 145816

Answers (12)

ryandra
ryandra

Reputation: 344

I try above answers but don't work in my case. Here if you use icon button in suffix text field. Flutter v3.27.1

    TextField(
      decoration: AppTheme.inputDecorationFill.copyWith(
        suffixIcon: Container(
          height: 0,                   // <====
          width: 0,                    // <====
          padding: EdgeInsets.all(4),  // <====
          child: IconButton(
            onPressed: () {},
            padding: EdgeInsets.zero,  // <====
            icon: Icon(
              Icons.visibility_rounded,
            ),
          ),
        ),
      ),
    ),

Upvotes: 0

omar
omar

Reputation: 11

if you want to give a square size here is how to do it

IconButton(
        padding: const EdgeInsets.all(0),
        constraints: BoxConstraints.tight(const Size.square(35)),
        onPressed: ()  {
        },
        iconSize: 22,
        icon: const Icon(LucideIcons.trash),
      ),

Upvotes: 0

andrei
andrei

Reputation: 965

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

Upvotes: 29

myturmudi
myturmudi

Reputation: 440

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

Upvotes: 5

Omar
Omar

Reputation: 676

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

Upvotes: 0

josevoid
josevoid

Reputation: 677

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

demo iconbutton

Upvotes: 7

Steph
Steph

Reputation: 12182

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

Upvotes: 151

Syed Zain Jeelani
Syed Zain Jeelani

Reputation: 619

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

Upvotes: 13

Tan Nguyen
Tan Nguyen

Reputation: 426

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.

Upvotes: 4

ChinLoong
ChinLoong

Reputation: 1833

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

Upvotes: 0

dfmiller
dfmiller

Reputation: 1203

You can replace IconButton with InkWell:

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

Upvotes: 31

adrianvintu
adrianvintu

Reputation: 1407

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.

Upvotes: 52

Related Questions