StyledIcon (Icon)

A wrapped Icon widget that can be easily themed and styled using Mix style attributes. This simplifies the process of applying consistent and reusable styling across Icon widgets.

Usage

To use StyledIcon, simply pass the icon data and apply the style using the Style class.

StyledIcon(
  Icons.star,
  style: Style(
    $icon.size(30),
    $icon.color.blue(),
  ),
);

Inheritance

The StyledIcon widget has the inherit flag set to true by default. This means that the style attributes will be inherited from its closest Style ancestor in the widget tree.

Box(
  Style(
    $icon.size(30),
    $icon.color.blue(),
  ),
  child: StyledIcon(Icons.star),
);

In the above example, the StyledIcon widget will inherit the icon size and color style from the Box widget. However, remember that decorators attributes cannot be inherited.

AnimatedStyledIcon

An AnimatedStyledIcon allows you to use AnimatedIconData with a controllable animation progress and applies styles in the same way as StyledIcon.

AnimatedStyledIcon(
  AnimatedIcons.menu_close,
  progress: animationController, // Animation<double>
  style: Style(
    $icon.size(60),
    $icon.color.green(),
  ),
);

Utilities

The $icon constant alias is an instance of IconUtility, which facilitates the construction of IconSpec attributes. These attributes are used to style and manage properties of icon widgets.

color

Change the color of the icon:

$icon.color.red();

size

Set the size of the icon:

$icon.size(24);

// document , , , , , ,

weight

Set the stroke weight for drawing the icon:

$icon.weight(24);

grade

Set the grade (granular stroke weight) for drawing the icon:

$icon.grade(10);

opticalSize

Set the optical size for drawing the $$icon.:

$icon.opticalSize(10);

fill

Set the fill for drawing the icon:

$icon.fill(0.7);

applyTextScaling

Set to able the icon scale:

$icon.applyTextScaling.on();

shadow and shadows

Set the shadow that will be painted underneath the icon:

$icon.shadow(10);
 
$icon.shadows([
  ShadowDto(
    color: ColorDto(
      Colors.black,
    ),
  ),
]);

Text Image