Problem implementing hero_animation flutter

Question

let's see if someone can help me. I'm trying to implement an animation with hero_animation of a button, that when you press it, it moves to another container above. how could it be done? Something like the image Example Thanks!

I tried to implement the hero_animation tags but I didn't succeed, and the local_hero library no longer works for later versions of flutter.

Answer 1

Flutter provides a Hero widget that allows you to add the animation you want. You can find the documentation here

The key points to understand are:

• wrap your matching widgets in a Hero widget, with the same tag
• the animation is done when a new Route is pushed to the navigator. You can't use this Hero widget simply in an animation, you have to push a new page

An exemple of implementation given by the flutter documentation:

class HeroAnimation extends StatelessWidget {
  Widget build(BuildContext context) {
    timeDilation = 5.0; // 1.0 means normal animation speed.

    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic Hero Animation'),
      ),
      body: Center(
        child: PhotoHero(
          photo: 'images/flippers-alpha.png',
          width: 300.0,
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute<void>(
              builder: (BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    title: const Text('Flippers Page'),
                  ),
                  body: Container(
                    // The blue background emphasizes that it's a new route.
                    color: Colors.lightBlueAccent,
                    padding: const EdgeInsets.all(16),
                    alignment: Alignment.topLeft,
                    child: PhotoHero(
                      photo: 'images/flippers-alpha.png',
                      width: 100.0,
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ),
                );
              }
            ));
          },
        ),
      ),
    );
  }
}

class PhotoHero extends StatelessWidget {
  const PhotoHero({ Key key, this.photo, this.onTap, this.width }) : super(key: key);

  final String photo;
  final VoidCallback onTap;
  final double width;

  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(
              photo,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}

Here you have a PhotoHero widget used in the Scaffold of HeroAnimation, and another one in the Scaffold of the page that is pushed. Both have the same tag (which is here the photo URL), and the animation is done during the transition between the 2 pages.