Reputation: 138

Flutter Icon Animation

I am new to flutter design. So I have a question about Icons Animations. I've created IconButton in flutter application with star:

IconButton(color: _isFavourite
           ? Theme.of(context).primaryColor
           : Colors.grey[600],
           onPressed: () => changeFavourites(),
           icon: Icon(Icons.star)),

When user clicks the button, star changes color. Just changes it, and nothing more. The question is: can I somehow make this changing color transition more interesting? Like more smooth or something like this Maybe there is a package to create such a icons animations?
Thanks

Upvotes: 2

Answers (3)

Md. Yeasin Sheikh

Reputation: 63829

While this is about animating Color, you can use ColorTween

class _ColoAnState extends State<ColoAn> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation animation;
  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(milliseconds: 200), //controll animation duration
      vsync: this,
    )..addListener(() {
        setState(() {});
      });

    animation = ColorTween(
      begin: Colors.grey,
      end: Colors.red,
    ).animate(controller);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.favorite,
          color: animation.value,
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        if (controller.value == 1)
          controller.reverse();
        else
          controller.forward();
      }),
    );
  }
}

More about AnimationController and ColorTween

Upvotes: 7