Flutter - How to change IconButtons size with Theme

Question

I have a Row with multiple IconButtons and I need to change their color and size. I managed to change the color, but I'm not able to change the icons size.

IconTheme(
                  data: IconThemeData(size: 48.0, color: Colors.yellow),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () => null,
                      ),
                      IconButton(
                        icon: Icon(Icons.file_upload),
                        onPressed: () => _addPhoto(false),
                      ),
                      IconButton(
                        icon: Icon(Icons.camera_alt),
                        onPressed: () => _addPhoto(true),
                      ),
                    ],
                  ),
                ),

If I set the size within the IconButtons with iconSize it works, but with IconTheme it doesn't.

How can I fix it?

Answer 1

As defined in the official docs, link here:

This property must not be null. It defaults to 24.0. The size given here is passed down to the widget in the icon property via an IconTheme. Setting the size here instead of in, for example, the Icon.size property allows the IconButton to size the splash area to fit the Icon. If you were to set the size of the Icon using Icon.size instead, then the IconButton would default to 24.0 and then the Icon itself would likely get clipped.

Therefore, IconButton needs to be given the iconSize property as this overrides the IconTheme size property. If you want your button to have size derived from IconTheme then you should make your custom IconButton which sets the iconSize for you. For example:

class CustomIconButton extends StatelessWidget {
  CustomIconButton({Key key, this.onPressed, this.icon});

  final Function onPressed;
  final Icon icon;

  @override
  Widget build(BuildContext context) {
    IconThemeData iconThemeData = IconTheme.of(context);
    return IconButton(
        onPressed: onPressed, iconSize: iconThemeData.size, icon: icon);
  }
}

Answer 2

Use iconTheme of ThemeData like so and all your icons will be size 35 with the below code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          iconTheme: IconThemeData(
            size: 35.0,
        ),
      ),
      home: HomePage(),
    );
  }
}

Answer 3

The icon button was not picking the Icon Size defined in the Theme. Instead, I have to wrap the icon inside of the icon button in iconThemeData.

        icon: IconTheme(
          data: Theme.of(context).copyWith().iconTheme,
          child: Icon(
            Icons.search,
          ),
        ),
        onPressed: () {},
      ),

This fixed the problem but it's not a good practice to wrap the Icon every time for the theme. There must be a proper solution for that.

Answer 4

First, check if you are in a layout area that uses the primary or default theme. Whats that? Places on a layout that uses the primary color.

ThemeData(

  primaryColorLight: Colors.blueAccent[100],
  primaryColor: Colors.blueAccent[200],
  primaryColorDark: Colors.blueAccent[700],
  accentColor: Colors.yellow[700],

  iconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 28
  ),
  accentIconTheme: IconThemeData(
    color: Colors.yellow[700],
    size: 32
  ),
  primaryIconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 24
  ),
 
);

• If you are on a primary area (places on a layout that uses the primary color) the accentIconTheme will be used
• Otherwise the primaryIconTheme

The IconTheme I do not know for now, so anyone feels free to edit or put on a comment

Answer 5

make your raw a row of Icons (not IconButton). then wrap your Icon with a widget that can be taped Like (InkWell or GestureDetector) to take advantage of the (onTap function) . it’s not a good way actually but it will probably solve your problem .