decorated_icon 1.2.1 decorated_icon: ^1.2.1 copied to clipboard
A lightweight, efficient icon widget that supports a list of shadow effects.
Decorated Icon #
The best-performing shadowed icon widget for Flutter!
DecoratedIcon
is a super lightweight Icon
that supports shadow decorations.
No complicated hacks or multiple widgets, just List<Shadow> shadows
like a TextStyle
!
This widget is able to achieve the most efficient implementation of an icon with a shadow because it is uses a single Text
widget to display the icon and apply the shadows.
It even supports debugging and Semantics
.
One thing to keep in mind when using multiple shadows is the order of stacking by Flutter: the first shadow in the list will be painted at the bottom. (Similar to how the Stack widget draws its children.)
Also note that due to Flutter's current limitation, achieving an "outer glow" effect is not currently possible. You can read more here.
Usage #
To use this package, add decorated_icon
as a dependency in your pubspec.yaml file.
Example #
Import the library.
import 'package:decorated_icon/decorated_icon.dart';
Then use DecoratedIcon
as you would an Icon
:
final decoratedIcons = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
DecoratedIcon(
Icons.android,
color: Colors.purple,
size: 60.0,
shadows: [
BoxShadow(
blurRadius: 42.0,
color: Colors.purpleAccent,
),
BoxShadow(
blurRadius: 12.0,
color: Colors.white,
),
],
),
DecoratedIcon(
Icons.favorite,
color: Colors.lightBlue.shade50,
size: 60.0,
shadows: [
BoxShadow(
blurRadius: 12.0,
color: Colors.blue,
),
BoxShadow(
blurRadius: 12.0,
color: Colors.green,
offset: Offset(0, 6.0),
),
],
),
DecoratedIcon(
Icons.fingerprint,
color: Colors.orange,
size: 60.0,
shadows: [
BoxShadow(
color: Colors.black,
offset: Offset(3.0, 3.0),
),
],
),
],
);