testeurmaniak/icon_decoration

Add decoration capabilities for the Icon widget with shadows, borders, gradients.

icon_decoration

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

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

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

Mix them all together

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),
        ),
    ],
),

icon_decoration's Issues

Add background/fill color for outline icons

There are various icon packs like lucide_icons which only supply outlined icon which is good, but If I want a filled star or a liked heart(filled) then it won't be possible with bare flutter.

If we can fill those outlined icons then this would become a very useful package as we can already add borders to an icon.

IconDecoration's gradient property doesn't work anymore

Hi!

The package was working fine last time I tested it a few months ago, but it now seems to be incapable of rendering any gradients. It seems the last color used in the gradient is the one used to paint the whole widget.

Please change your license to somewhat permissive

Please change your license to LGPL-3.0 or MIT as GPL 3 doesn't allow anyone to use this on a proprietary or even a GPL-2.0 app due to licensing.