Flutter Hero Widget

Flutter Hero widget – example code

by


Flutter Hero Widget is used to create an animation between pages.

Here is an example of a flutter hero widget:

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://cdn.pixabay.com/photo/2022/08/13/18/25/river-7384240_960_720.jpg',
            ),
          ),
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return SecondPage();
            }));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://cdn.pixabay.com/photo/2022/08/13/18/25/river-7384240_960_720.jpg',
          ),
        ),
      ),
    );
  }
}

In this example, when the user taps on the image on the first page, they Navigator will push a new route to the second page. On the second page, the same image is displayed, but wrapped in a Hero widget.

Since both Hero widgets have the same tag, the animation between the pages will be a “hero” animation. The image will fly from its position on the first page to its position on the second page.

It’s important to make sure that the tag passed to the Hero widgets are unique within the app, so the animations are properly coordinated.

If you want to create flutter animation read this blog:

Flutter animation align widget and Flutter Tween Animation

Leave a Comment