Doubling the size of an icon in flutter

In Flutter want an icon that's a fixed factor larger than "usual", for example 2X size. I see the size parameter in the Icon constructor, and according to the doc for this parameter, the size "Defaults to the nearest IconTheme's IconThemeData.size." But when I attempt to fetch this default using

Theme.of(context).iconTheme.size

that expression returns null. But Icons can be created in the context and they do have some normal size. So how do I determine the normal size? How do set the size of an icon to be two-times the size it normally would be by default?

I'm aware of Transform() and that would probably work. But I'm still wondering how to set the size parameter of Icon() based on something concrete.

Icon can be sized in many ways. Here's a breakdown of 3 main approaches:

Method 1: size parameter

Use this method when you know the exact size you want the icon to be and it doesn't need to adjust dynamically.

Icon(
      Icons.star,
      size: 20,
    );

If no size parameter is set for the Icon and there's no IconTheme specified in the widget's context, the default size will depend on the layout context in which the Icon is rendered. It will either fallback to the default 24.0 or be determined by the constraints or layout of its parent.

To retrieve the resulting size of the Icon and multiply it by a factor, you can either use Kaushik Chandru's answer by using the Transform.scale widget:

Transform.scale(
  scale: 2.0,
  child: Icon(Icons.home),
),

Or you can also use the LayoutBuilder widget to calculate the constraints or the layout context of the parent, which is not recommended for dynamic changes.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double iconSize = constraints.maxWidth;
    return Icon(
      Icons.star,
      size: iconSize,
    );
  },
)

Method 2: Wrap Icon with a layout widget

Use this method when you want to dynamically control the size of the icon within a layout. This may not maintain aspect ratio

By layout widget I mean widgets that are responsible for defining the size/constraints of their child widgets. Examples of layout widget include SizedBox, Container, ConstrainedBox, Row/Column, Expanded, Flex, Listview, etc.

SizedBox(
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.height * 0.5,
  child: Icon(),),

The resizable_widget package is a great example of this. It adjusts layout constraints for its child widget based on user interaction.

Method 3: Wrap Icon with FittedBox and a layout widget

Use this method when you want the icon to dynamically adjust its size to fit the available space provided by its parent constraints. This maintains aspect ratio

If the Icon is not being adjusted using method 2, It's likely because there is a parent further down the widget tree controlling its constraints like a Column widget for example. A Column widget's vertical space shrinks or expands, disallowing the Icon to expand to its desired size.

To address this, you need to wrap Icon widget inside a FittedBox inside a SizedBox or Container, to force the icon size to scale to fit the constraints set by the SizedBox.

SizedBox(
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.height * 0.5,
  child: FittedBox( 
           child: Icon(),),),

The FittedBox widget dynamically adjusts the size of the Icon to fit within its own bounds while maintaining its aspect ratio. It doesn't enforce specific width or height but scales the size to fit the available space provided by its parent, adjusting the size based on the BoxFit parameter. It allows the child to scale up or down