Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
icon_decoration cover
Package detailsv2.1.0

icon_decoration

Add decoration capabilities to the Icon widget with borders and gradients.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
2.8K
Likes
97
Pub points
150

Install package

flutter pub add icon_decoration

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

IconDecoration enhances the Icon widget by enabling decorative features such as borders and gradients, allowing for more visually appealing icons in Flutter applications. It extends the standard Icon widget with customizable styling options, making it easy to apply advanced visual effects without complex custom painting. Ideal for apps requiring polished UI elements, this package supports all major platforms including mobile, web, and desktop.

Use cases

  • Adding styled borders to icons
  • Applying gradient fills to icons
  • Creating visually rich iconography
  • Enhancing UI consistency across platforms
  • Designing interactive icon states

Key features

  • Border customization for icons
  • Gradient support on icons
  • Simple integration with existing Icon widgets
  • Cross-platform compatibility
  • Lightweight and performant

Suitable for

  • UI designers seeking visual polish
  • Developers building branded interfaces
  • Apps with icon-heavy navigation
  • Projects requiring consistent icon styling
  • Teams using Flutter for multi-platform apps

Considerations

  • Limited to basic decoration features
  • May require additional styling for complex effects
  • Not suitable for highly dynamic icon animations
  • Depends on Flutter's rendering performance
  • Best used with static or semi-static icon designs

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Categories

Icons

Source repository

Projects using this package