Hero animations in Flutter - Mini App: Build & Ship

Build: Hero Animation Demo

This screen demonstrates a hero animation between a list of images and a detail view. When the user taps an image, it smoothly transitions to a larger version on a new screen.

Target UI

List Screen:
+-----------------------+
| [Image 1]             |
| [Image 2]             |
| [Image 3]             |
|                       |
| Tap an image to view  |
+-----------------------+

Detail Screen:
+-----------------------+
| [Large Image]         |
|                       |
| Back button           |
+-----------------------+

Create a list screen with at least 3 tappable images.

Each image uses a Hero widget with a unique tag.

On tap, navigate to a detail screen showing the tapped image larger.

The detail screen also uses a Hero widget with the same tag for smooth animation.

Include a back button to return to the list screen.

Starter Code

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 ImageListScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Images')),
      body: ListView(
        children: [
          // TODO: Add tappable images with Hero widgets here
        ],
      ),
    );
  }
}

class ImageDetailScreen extends StatelessWidget {
  final String imageTag;
  final String imageUrl;

  const ImageDetailScreen({super.key, required this.imageTag, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Detail')),
      body: Center(
        // TODO: Add Hero widget with the image here
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

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 ImageListScreen(),
    );
  }
}

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

  final List<Map<String, String>> images = const [
    {'tag': 'image1', 'url': 'https://picsum.photos/id/1011/200/200'},
    {'tag': 'image2', 'url': 'https://picsum.photos/id/1012/200/200'},
    {'tag': 'image3', 'url': 'https://picsum.photos/id/1013/200/200'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Images')),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: images.map((image) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => ImageDetailScreen(
                    imageTag: image['tag']!,
                    imageUrl: image['url']!,
                  ),
                ),
              );
            },
            child: Hero(
              tag: image['tag']!,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Image.network(image['url']!, width: 200, height: 200, fit: BoxFit.cover),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

class ImageDetailScreen extends StatelessWidget {
  final String imageTag;
  final String imageUrl;

  const ImageDetailScreen({super.key, required this.imageTag, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Detail')),
      body: Center(
        child: Hero(
          tag: imageTag,
          child: Image.network(imageUrl, width: 300, height: 300, fit: BoxFit.cover),
        ),
      ),
    );
  }
}

We created a list of images each wrapped in a Hero widget with a unique tag. When the user taps an image, the app navigates to a detail screen passing the tag and URL. The detail screen also uses a Hero widget with the same tag to create a smooth transition animation between the small image and the large image. This demonstrates the hero animation concept in Flutter simply and clearly.

Final Result

Completed Screen

Images Screen:
+-----------------------+
| [Image 1]             |
|                       |
| [Image 2]             |
|                       |
| [Image 3]             |
+-----------------------+

Tap an image to see it enlarge with a smooth animation.

Detail Screen:
+-----------------------+
|                       |
|       [Large Image]   |
|                       |
|       < Back          |
+-----------------------+

Tap an image on the list screen to navigate to the detail screen with a smooth hero animation enlarging the image.

Tap the back button in the app bar to return to the list screen with a reverse hero animation.

Stretch Goal

Add a fade transition along with the hero animation when navigating between screens.

💡 Hint

Use PageRouteBuilder with a FadeTransition wrapping the Hero animation.