Hero animations in Flutter

Introduction

Hero animations help make screen changes smooth by moving a widget from one page to another. This makes the app feel connected and natural.

When you want to show a picture or item moving from a list to a detail page.

When you want to highlight a button or icon that appears on two screens.

When you want to create a smooth transition between two related screens.

When you want to keep user focus on an element during navigation.

When you want to add polish and professionalism to your app's navigation.

Syntax

Flutter

Hero(
  tag: 'uniqueTag',
  child: WidgetToAnimate(),
)

The tag must be the same on both source and destination widgets.

The child is the widget that will animate between screens.

Examples

This wraps an image with a Hero widget using the tag 'imageHero'.

Flutter

Hero(
  tag: 'imageHero',
  child: Image.network('https://example.com/pic.jpg'),
)

This wraps an icon with a Hero widget using the tag 'iconHero'.

Flutter

Hero(
  tag: 'iconHero',
  child: Icon(Icons.star, size: 50),
)

Sample App

This app shows a small owl image on the first page. When you tap it, the image smoothly grows and moves to the second page. This is done by wrapping the image in a Hero widget with the same tag on both pages.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Demo',
      home: const FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const SecondPage()),
            );
          },
          child: Hero(
            tag: 'hero-image',
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                width: 150,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            width: 300,
          ),
        ),
      ),
    );
  }
}

Important Notes

Make sure the tag is unique in the app and matches exactly on both widgets.

The Hero animation works best with images or shapes that look similar on both screens.

You can customize the animation by wrapping the Hero's child with other widgets like ClipRRect for rounded corners.

Summary

Hero animations create smooth transitions by moving a widget between screens.

Use the same tag on both widgets to link them.

They improve user experience by making navigation feel natural and connected.