animated_icon_button 1.0.2
animated_icon_button: ^1.0.2 copied to clipboard

Flutter package to create custom animated IconButton. Includes all available icons. Based on native IconButton.

animated_icon_button

😊 Flutter package to create custom animated IconButton.

😵 Includes all available icons. Based on native IconButton.


Breaking Change #

After 1.0.2 version you can use multiple icons.

Getting Started #

Follow these steps to use this library

Add dependency #

dependencies:
  animated_icon_button: ^1.0.2 #latest version

Add import package #

import 'package:animated_icon_button/animated_icon_button.dart';

Easy to use #

Simple example of use AnimatedIconButton
Put this code in your project at an screen and wait for magic 😊

    AnimatedIconButton(
        onPressed: () => print('all icons pressed'),
        icons: [
            AnimatedIconButtonEntry(
                icon: Icon(Icons.add),
                onPressed: () => print('add pressed'),
            ),
            AnimatedIconButtonEntry(
                icon: Icon(Icons.close),
            ),
        ],
    ),

More icons #

Now you can use more than 2 icons Add new icons to your list and they will change one by one

    AnimatedIconButton(
        size: 35,
        onPressed: () {
            print('all icons pressed');
        },
        duration: const Duration(milliseconds: 200),
        icons: <AnimatedIconButtonEntry>[
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.mic,
                    color: Colors.purple,
                ),
                onPressed: () => print('mic pressed'),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.g_translate,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.collections_sharp,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
        ],
    ),

Custom animation controller #

In order to animate your icons in a custom way, like on text changed or when pressing a button, just use the animationController property as follows.

    var animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 200),
        reverseDuration: Duration(milliseconds: 200),
    );

    AnimatedIconButton(
        animationController: animationController,
        size: 35,
        onPressed: () {
            print('all icons pressed');
        },
        duration: const Duration(milliseconds: 200),
        icons: <AnimatedIconButtonEntry>[
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.mic,
                    color: Colors.purple,
                ),
                onPressed: () => print('mic pressed'),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.g_translate,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.collections_sharp,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
        ],
    ),

Then, whenever you want, execute your animationController.forward() and animationController.reverse() methods to get your icons animated.

Don't forget when you use this property duration is not used, so it can be emitted.

126
likes
130
pub points
89%
popularity

Publisher

frezycode.com

Flutter package to create custom animated IconButton. Includes all available icons. Based on native IconButton.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, freezed_annotation

More

Packages that depend on animated_icon_button