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

Last update: Dec 24, 2021

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.

GitHub

https://github.com/ankitmishradev/advanced-icon
You might also like...

The app to demo animation with Flutter by implement Facebook reactions

The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Jun 25, 2022

Flutter Animation - Grocery App UI

Flutter Animation - Grocery App UI

Flutter Animation - Grocery App UI Packages we are using: flutter_svg: link goole_fonts: link Fonts Poppins link creating a custom animation Grocery A

Feb 14, 2022

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Jun 6, 2022

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Feb 26, 2022

A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView

A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView

easy_scroll_to_index A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView Author: DinhVanHung Demo Example: Displ

Nov 19, 2021

Flutter package designed to select an item from a list, with the option to filter and even search the items online.

Flutter package designed to select an item from a list, with the option to filter and even search the items online.

select_dialog Package Package designed to select an item from a list, with the option to filter and even search the items online. Versions Non Null Sa

May 2, 2022

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

Jun 27, 2022

A flutter package which makes it easier to display the difference between two images.

A flutter package which makes it easier to display the difference between two images.

πŸ‘ Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Jun 18, 2022

A flutter package to help you beautify your app popups.

A flutter package to help you beautify your app popups.

flutter_beautiful_popup δΈ­ζ–‡ A flutter package to help you beautify your app popup, can be used in all platform.Live Demo. Preview: Getting Started Add

Jun 30, 2022

Related

Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

Feb 7, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

May 24, 2022
The Flutter implementation of Iconly icon sets.
The Flutter implementation of Iconly icon sets.

Flutter package for using Iconly Icons. Iconly is totally free, and you can use this package to bring these awesome icons to your Flutter project.

Jun 10, 2022
A ecommerce app created in flutter implementing the features add to cart, total ,add, remove item and a login function

catalog A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Nov 27, 2021
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

Jun 7, 2022
A BottomNavigationBar for nested routing and advanced features to improve user experience.
A BottomNavigationBar for nested routing and advanced features to improve user experience.

navbar_router 0.1.2 This is the ultimate BottomNavigionBar created by considering the advanced use cases in real world applications. This widget handl

Jun 17, 2022
A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience
A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options  adding up to an incredible UI experience

A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

May 15, 2022
A package for flip panel with built-in animation
A package for flip panel with built-in animation

Flip Panel A package for flip panel with built-in animation How to use import 'package:flip_panel/flip_panel.dart'; Create a flip panel from iterable

Jun 28, 2022
Flutter Beautiful Login Page design and Animation - day 12
Flutter Beautiful Login Page  design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Jun 14, 2022
A customizable timer builder, with controller, animation, intervals, callbacks and custom actions for Flutter.
A customizable timer builder, with controller, animation, intervals, callbacks and custom actions for Flutter.

Custom Timer βŒ› A highly customizable timer builder, with controller, animation, intervals, callbacks, custom actions, and more! ?? Simple Usage @overr

Apr 17, 2022