Flutter Hero Animation Example

Hero animations in Flutter are used to create seamless transitions between two screens or views, where an image or widget is shared between them. In this tutorial, we’ll go through the steps to create a standard hero animation in Flutter.

Here is a tutorial on how to implement a Flutter Hero Animation between two different screens:

Step 1. Create two screens

In order to create a Hero Animation, you need two screens with a shared widget that will be animated between them. For this tutorial, let’s create two screens: a home screen and a details screen. The home screen will display a list of items, and when a user taps on an item, it will navigate to the details screen and animate the selected item to the details screen.

Step 2. Create the shared widget

The shared widget is the widget that will be animated between the two screens. In our example, we will use an image widget as the shared widget. In both the home and details screens, use the same image widget with the same tag, so that Flutter can identify it as the widget to animate.

// Home screen
Hero(
  tag: "my-image-tag",
  child: Image.network("https://codezi.pro/tutorial/wp-content/uploads/2023/02/flutter-widget.jpg"),
),

// Details screen
Hero(
  tag: "my-image-tag",
  child: Image.network("https://codezi.pro/tutorial/wp-content/uploads/2023/02/flutter-widget.jpg"),
),

Step 3. Navigate to the details screen

When a user taps on an item in the home screen, we need to navigate to the details screen and trigger the Hero Animation. In the onTap method of the item, use the Navigator to navigate to the details screen, and wrap the image widget in a Hero widget.

// Home screen
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetailsScreen()),
    );
  },
  child: Hero(
    tag: "my-image-tag",
    child: Image.network("https://example.com/my-image.jpg"),
  ),
),

Step 4. Wrap the destination widget in a Hero widget

In the details screen, wrap the destination widget in a Hero widget with the same tag as the shared widget in the home screen.

// Details screen
Hero(
  tag: "my-image-tag",
  child: Image.network("https://example.com/my-image.jpg"),
),

And that’s it! Now when a user taps on an item in the home screen, the selected image will smoothly transition to the details screen using the Hero Animation.

Source Full:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen One')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailScreen(),
            ),
          );
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://codezi.pro/tutorial/wp-content/uploads/2023/02/flutter-page-route-transition-1.jpg',
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen Two')),
      body: Center(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://codezi.pro/tutorial/wp-content/uploads/2023/02/flutter-page-route-transition-1.jpg',
          ),
        ),
      ),
    );
  }
}

I hope this tutorial was helpful in showing you how to use the Flutter Hero Animation. Remember that Hero Animation can be used with any widget, so you can use it to animate not only images, but also text, buttons, and other widgets in your Flutter app.