Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TesteurManiak/icon_decoration
Add decoration capabilities for the Icon widget with shadows, borders, gradients.
https://github.com/TesteurManiak/icon_decoration
dart flutter icons
Last synced: 5 days ago
JSON representation
Add decoration capabilities for the Icon widget with shadows, borders, gradients.
- Host: GitHub
- URL: https://github.com/TesteurManiak/icon_decoration
- Owner: TesteurManiak
- License: bsd-2-clause
- Created: 2021-10-13T17:38:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T13:25:07.000Z (over 1 year ago)
- Last Synced: 2024-07-26T20:57:58.684Z (3 months ago)
- Topics: dart, flutter, icons
- Language: Dart
- Homepage: https://pub.dev/packages/icon_decoration
- Size: 820 KB
- Stars: 23
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# icon_decoration
[](https://pub.dev/packages/icon_decoration)
[](https://github.com/TesteurManiak/icon_decoration/actions/workflows/tests.yml)
[](https://coveralls.io/github/TesteurManiak/icon_decoration?branch=main)
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-to-your-project)
- [Add dependency to your `pubspec.yaml`](#add-dependency-to-your-pubspecyaml)
- [Import the package](#import-the-package)
- [How to use](#how-to-use)
- [Add borders to icons](#add-borders-to-icons)
- [Add gradients to icons](#add-gradients-to-icons)
- [Mix them all together](#mix-them-all-together)
- [Migration Guide](#migration-guide)
- [v2.0.0](#v200)
## Add to your project
### Add dependency to your `pubspec.yaml`
```yaml
icon_decoration: any
```
### Import the package
```dart
import 'package:icon_decoration/icon_decoration.dart';
```
## How to use
### Add borders to icons
```dart
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][flutter_web_renderer]**
```dart
DecoratedIcon(
icon: Icon(Icons.all_inbox),
decoration: IconDecoration(
gradient: rainbowGradient,
),
)
```
### Mix them all together
```dart
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**
```dart
DecoratedIcon(
icon: Icon(Icons.all_inbox),
decoration: IconDecoration(
shadows: [
Shadow(
color: Colors.red,
blurRadius: 3,
offset: Offset(0, 2),
),
],
),
)
```
**After**
```dart
Icon(
Icons.all_inbox,
shadows: [
Shadow(
color: Colors.red,
blurRadius: 3,
offset: Offset(0, 2),
),
],
),
```
[flutter_web_renderer]: https://docs.flutter.dev/platform-integration/web/renderers