advanced icon
a flutter package which contains collection of icon decoration tools such as gradient, opacity and icon transition feature with cool animation effects.
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
- an optional
secondaryicon
property is available to enhance user interaction with minimal manual effort. - cool animation effects are available to make smooth transition between
icon
andsecondaryicon
. - in addition to color, icons can also be painted with gradient.
- opacity property is available to make opaque icons.
- inherits all properties of material designed
icon
widget.
icon transition
to use icon transition feature, secondaryicon
must not be null and when it is not null the widget will look up for state
and will show icons according to 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 current state of advancedicon
. advancedicon
can have any one of the following states:
advancediconstate.primary
advancediconstate.secondary
whenever the state changes, it notifies advancedicon
and advancedicon
changes the current icon following below rules:
icon
will appear foradvancediconstate.primary
.secondaryicon
will appear foradvancediconstate.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 then in private class define a property which holds current state of advancedicon
and define a function to change 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 toadvancediconstate.secondary
and transition will happen fromicons.add
toicons.check
following the default bubble animation effect in 300ms.
let’s configure it further. there are 7 cool animation effects availble for icon transition feature.
- spin
- bubble
- fade
- fliph
- flipv
- spinbubble
- bubblefade
- 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),
)
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
state: _state,
)
to get better understanding, see live example here.
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
)
Comments are closed.