TesteurManiak/icon_decoration

icon_decoration

Pub Version Test workflow Coverage Status

Add decoration capabilities to the Icon widget with borders and gradients. This new DecoratedIcon widget overlap itself with the base Icon widget to provide a more complete decoration system through a IconDecoration property.

Table of contents

• Add to your project
  • Add dependency to your pubspec.yaml
  • Import the package
• How to use
  • Add borders to icons
  • Add gradients to icons
  • Mix them all together
• Migration Guide
  • v2.0.0

Add to your project

Add dependency to your pubspec.yaml

icon_decoration: any

Import the package

import 'package:icon_decoration/icon_decoration.dart';

How to use

Add borders to icons

https://raw.githubusercontent.com/TesteurManiak/icon_decoration/refs/heads/main/screenshots/border_with_colorized_icon.png

DecoratedIcon(
    icon: Icon(Icons.favorite, color: Colors.green),
    decoration: IconDecoration(border: IconBorder()),
)

Add gradients to icons

Gradients are supported on Flutter Web only with the canvaskit renderer

https://raw.githubusercontent.com/TesteurManiak/icon_decoration/refs/heads/main/screenshots/base_gradient.png

DecoratedIcon(
    icon: Icon(Icons.all_inbox),
    decoration: IconDecoration(
        gradient: rainbowGradient,
    ),
)

Mix them all together

https://raw.githubusercontent.com/TesteurManiak/icon_decoration/refs/heads/main/screenshots/gradient_with_border_and_shadow.png

DecoratedIcon(
    icon: Icon(
        Icons.all_inbox,
        shadows: [
            Shadow(
                color: Colors.red,
                blurRadius: 3,
                offset: Offset(0, 2),
            ),
        ],
    ),
    decoration: IconDecoration(
        gradient: _rainbowGradient,
        border: IconBorder(),
    ),
)

Migration Guide

v2.0.0

• Removed IconDecoration.shadows, use Icon.shadows instead.

Before

DecoratedIcon(
    icon: Icon(Icons.all_inbox),
    decoration: IconDecoration(
        shadows: [
            Shadow(
                color: Colors.red,
                blurRadius: 3,
                offset: Offset(0, 2),
            ),
        ],
    ),
)

After

Icon(
    Icons.all_inbox,
    shadows: [
        Shadow(
            color: Colors.red,
            blurRadius: 3,
            offset: Offset(0, 2),
        ),
    ],
),