advanced_icon 0.1.2 copy "advanced_icon: ^0.1.2" to clipboard
advanced_icon: ^0.1.2 copied to clipboard

A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

Advanced Icon #

A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects. See live example.

Pub Version Build Status MIT License codecov CodeFactor

Installing #

With flutter run this command

flutter pub add advanced_icon

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  advanced_icon: <latest version>

Now in your Dart code, you can use:

import 'package:advanced_icon/advanced_icon.dart';

Features at a Glance #

  1. An optional secondaryIcon property is available to enhance user interaction with minimal manual effort.
  2. Cool animation effects are available to make a smooth transition between icon and secondaryIcon.
  3. In addition to color, icons can also be painted with a gradient.
  4. Opacity property is available to make opaque icons.
  5. Inherits all properties of material designed Icon widget.

Icon Transition #

To use the icon transition feature, secondaryIcon must not be null and when it is not null the widget will lookup for state and will show icons according to the current state. To change the icon from icon to secondaryIcon or vice-versa, let's first see about state of AdvancedIcon:

state holds the information about the current state of AdvancedIcon. AdvancedIcon can have any one of the following states:

  1. AdvancedIconState.primary
  2. AdvancedIconState.secondary

Whenever the state changes, it notifies AdvancedIcon and AdvancedIcon changes the current icon following the below rules:

  1. icon will appear for AdvancedIconState.primary.
  2. secondaryIcon will appear for AdvancedIconState.secondary.

state can be changed using any of the following methods:

  • setState
  • provider
  • stream
  • inheritedWidget
  • or any other methods used for state management in flutter.

Let's illustrate state management of AdvancedIcon using setState. First, create a stateful widget. In the private class of the widget, define a property that holds the current state of AdvancedIcon and define a function to change the current state on every user interaction as follows:

AdvancedIconState _state = AdvancedIconState.primary;

void _changeState(){
  setState(() {
    if (_state == AdvancedIconState.primary) {
      _state = AdvancedIconState.secondary;
    } else {
      _state == AdvancedIconState.primary;
    }
  });
}

Then add a GestureDetector or IconButton inside build method and use AdvancedIcon as follows:

GestureDetector(
  onTap: _changeState,
  child: AdvancedIcon(
    icon: Icons.add, //change this icon as per your requirement.
    secondaryIcon: Icons.check, //change this icon as per your requirement.
    state: _state,
  ),
)

In above case when first time _changeState will be called, state will change to AdvancedIconState.secondary and transition will happen from Icons.add to Icons.check following the default bubble animation effect in 300ms.

Let's configure it further. There are seven cool transition effects available for icon transition features.

  1. spin
  2. bubble
  3. fade
  4. flipH
  5. flipV
  6. spinBubble
  7. bubbleFade
  8. none

Change effect property to try more animation effects as follows:

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  state: _state,
  effect: AdvancedIconEffect.spin, //change effect as per your requirement.
)

To increase or decrease the transition time, change duration property as follows:

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  state: _state,
  duration: Duration(milliseconds: 700),
  effect: AdvancedIconEffect.fade,
)

Give secondaryIcon a more specific color by setting secondaryColor property as follows:

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  color: Colors.blue, //color of primary icon, change it as per your requirement
  secondaryColor: Colors.green, //color of secondary icon, change it as per your requirement
  effect: AdvancedIconEffect.fade,
  state: _state,
)

To get better understanding, see live example.

Decoration #

Gradient #

To make icons look more appealing, use gradient to paint the icons. color and secondaryColor will be ignored if gradient is set as follows:

AdvancedIcon(
  icon: Icons.photo_camera,
  color: Colors.red, //color will have no effect
  gradient: const LinearGradient( //change gradient as per your requirement
    colors: <Color>[Colors.red, Colors.white],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    step: [0.2,0.8],
  ),
)

Opacity #

Make opaque icons by setting opacity as follows:

AdvancedIcon(
  icon: Icons.direction_bike,
  color: Colors.red,
  opacity: 0.5, //should be between 0 and 1 inclusive
)

Decoration banner

Changelog #

Please see the changelog to know about the latest updates.

Contributions #

Contribution to this project are most welcomed.

If you find bugs or want more features, but don't know how to fix/implement them, please fill an issue.

If you fixed bugs or implemented new features, please send a pull request.

89
likes
160
pub points
79%
popularity

Publisher

verified publisherdevtonium.com

A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on advanced_icon