How Animate Like Button in Flutter

Question

I would like to ask you how to animate the size of an icon when you click on an image like on Instagram, Tiktok...

This is what I tried (and many other things) but without success.

 GestureDetector(
              onDoubleTap: (){
                setState(() {
                  _showLikeAnimation = true;
                  _sizeFavoriteAnimation = 60.0; //old value is 20.0
                });
              },
              child: Stack(
                alignment: AlignmentDirectional.center,
                children: [
                  _imagePost(),
                  AnimatedSize(curve: Curves.easeIn, duration: const Duration(seconds: 2), child: Icon(Icons.favorite, size: _sizeFavoriteAnimation))
                ],
              )),

Would you have an idea?

Answer 1

One way you can achieve this is by using ScaleTransition and a CurvedAnimation . Below is a simple example.

When the user taps the icon, I change the look of the icon so it shows the latest state (active/not active) and I make it a little smaller. When this transition ends I make the icon big again. This is similar to how a button behaves in the real world when you press it. I hope this is what you had in mind.

class LikeButton extends StatefulWidget {
  const LikeButton({Key? key}) : super(key: key);

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
      duration: const Duration(milliseconds: 200), vsync: this, value: 1.0);

  bool _isFavorite = false;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isFavorite = !_isFavorite;
        });
        _controller
            .reverse()
            .then((value) => _controller.forward());
      },
      child: ScaleTransition(
        scale: Tween(begin: 0.7, end: 1.0).animate(
            CurvedAnimation(parent: _controller, curve: Curves.easeOut)),
        child: _isFavorite
            ? const Icon(
          Icons.favorite,
          size: 30,
          color: Colors.red,
        )
            : const Icon(
          Icons.favorite_border,
          size: 30,
        ),
      ),
    );
  }
}

Answer 2

You can use https://pub.dev/packages/lottie to animate,

try this;

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Material App', home: LottieLearn());
  }
}

class LottieLearn extends StatefulWidget {
  const LottieLearn({Key? key}) : super(key: key);

  @override
  State<LottieLearn> createState() => _LottieLearnState();
}

class _LottieLearnState extends State<LottieLearn> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    final AnimationController darkmodeController =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    final AnimationController favoriteController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    bool isLight = false;
    bool isFavorite = false;
    const String favoriteButton = "https://assets10.lottiefiles.com/packages/lf20_slDcnv.json";
    const String darkMode = "https://assets10.lottiefiles.com/packages/lf20_tbyegho2.json";

    return Scaffold(
      appBar: AppBar(
        actions: [
          InkWell(
              onTap: () async {
                await darkmodeController.animateTo(isLight ? 0.5 : 1);
                // controller.animateTo(0.5);
                isLight = !isLight;
              },
              child: Lottie.network(darkMode, repeat: false, controller: darkmodeController)),
          InkWell(
              onTap: () async {
                await favoriteController.animateTo(isFavorite ? 1 : 0);
                isFavorite = !isFavorite;
              },
              child: Lottie.network(favoriteButton, repeat: false, controller: favoriteController)),
        ],
      ),
    );
  }
}

this must give you an idea, just "flutter pub add lottie" then copy paste code