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 nearest 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 modifier attributes cannot be inherited.

AnimatedStyledIcon

An AnimatedStyledIcon allows you to use AnimatedIconData with controllable animation progress, and it applies styles in the same manner 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 IconSpecUtility, which facilitates the construction of IconSpecAttribute objects. These attributes are used to style and manage properties of StyledIcon and AnimatedStyledIcon.

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