Implementing Shared Element Transitions with Hero Widget in Flutter

Flutter’s rich set of widgets and animations makes it a fantastic framework for building beautiful and engaging user interfaces. One particularly compelling animation technique is implementing shared element transitions. These transitions provide a seamless visual connection between two screens when an element “morphs” or moves from one screen to another. The Hero widget is a powerful tool for achieving this effect in Flutter. This blog post delves into how to implement shared element transitions using the Hero widget in Flutter, complete with detailed examples.

What are Shared Element Transitions?

Shared element transitions create a smooth and continuous visual effect when navigating between two different screens. A visual element (like an image or a piece of text) appears to seamlessly transition from its initial position and state on the source screen to its final position and state on the destination screen. This effect enhances the user experience by providing visual continuity and a sense of context between different parts of the application.

Why Use Shared Element Transitions?

• Enhance User Experience: Provides smooth, contextual transitions.
• Create Visual Interest: Makes navigation more engaging and less jarring.
• Improve Navigation: Clarifies the relationship between screens.

The Hero Widget: Flutter’s Key to Shared Element Transitions

The Hero widget in Flutter makes implementing shared element transitions straightforward. It wraps a widget that you want to animate between two routes (screens). Flutter takes care of creating the animation by smoothly transforming the hero from one route to another.

Key Properties of the Hero Widget

• tag: A unique identifier for the Hero. Heroes with the same tag will animate together between routes.
• child: The widget that will be animated during the transition.
• createRectTween: (Optional) Customizes the rectangular transformation between the start and end positions.
• flightShuttleBuilder: (Optional) A builder function to create a custom widget to be used during the transition animation.

Implementing Shared Element Transitions: A Step-by-Step Guide

Let’s walk through a step-by-step guide to implementing shared element transitions with the Hero widget in Flutter.

Step 1: Set Up the Project

First, create a new Flutter project (if you don’t have one already) using the command:

flutter create shared_element_transition_app

Step 2: Create the Source and Destination Screens

Create two Dart files, source_screen.dart and destination_screen.dart, which will represent the source and destination screens for the transition.

source_screen.dart

import 'package:flutter/material.dart';
import 'destination_screen.dart';

class SourceScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Source Screen'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => DestinationScreen(),
              ),
            );
          },
          child: Hero(
            tag: 'hero-image', // Unique tag
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150,
              height: 150,
            ),
          ),
        ),
      ),
    );
  }
}

In this code:

• A simple SourceScreen displays an image.
• The Hero widget wraps the Image.network widget, identified by the tag 'hero-image'.
• An InkWell widget is used to make the image clickable, triggering navigation to the destination screen.

destination_screen.dart

import 'package:flutter/material.dart';

class DestinationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Destination Screen'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-image', // Same unique tag as in SourceScreen
          child: Image.network(
            'https://via.placeholder.com/300',
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

Key points:

• A DestinationScreen is created.
• The Hero widget also wraps an Image.network widget, using the same tag 'hero-image' as the source screen.
• The destination image has a different size to demonstrate the transition effect.

Step 3: Update main.dart

Update the main.dart file to use the SourceScreen as the home screen.

import 'package:flutter/material.dart';
import 'source_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shared Element Transition',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SourceScreen(),
    );
  }
}

Step 4: Run the Application

Run the Flutter application:

flutter run

When you tap the image on the source screen, you should see a smooth transition animation to the destination screen, where the image seamlessly animates from the smaller size to the larger size.

Customizing the Transition

The Hero widget also allows you to customize the transition using the createRectTween and flightShuttleBuilder properties.

Customizing the Rectangle Tween

The createRectTween property allows you to define a custom interpolation between the bounding rectangles of the hero widgets.

Hero(
  tag: 'hero-image',
  createRectTween: (Rect? begin, Rect? end) {
    return MaterialRectCenterArcTween(begin: begin, end: end);
  },
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 150,
    height: 150,
  ),
)

Here, MaterialRectCenterArcTween provides a curved animation path, creating a more visually appealing effect.

Using flightShuttleBuilder for a Custom Widget

For more complex transitions, the flightShuttleBuilder provides complete control over the transition widget.

Hero(
  tag: 'hero-image',
  flightShuttleBuilder: (
    BuildContext context,
    Animation animation,
    HeroFlightDirection flightDirection,
    BuildContext fromContext,
    BuildContext toContext,
  ) {
    return RotationTransition(
      turns: animation,
      child: Image.network(
        'https://via.placeholder.com/150',
        width: 150,
        height: 150,
      ),
    );
  },
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 150,
    height: 150,
  ),
)

This example adds a rotation animation during the transition, making the effect even more dynamic.

Best Practices for Using Hero Widgets

• Unique Tags: Ensure that each Hero widget has a unique tag within the scope of its parent widget.
• Consistent Content: The content wrapped by the Hero widget should be visually similar between the source and destination screens to maintain the illusion of a seamless transition.
• Performance: Avoid animating very large images or complex widgets, as this can impact performance.

Conclusion

Implementing shared element transitions with the Hero widget in Flutter is a straightforward way to create engaging and visually appealing user interfaces. By leveraging the Hero widget, developers can create smooth and contextual animations that enhance the user experience. Experiment with different customization options like createRectTween and flightShuttleBuilder to create unique and compelling transitions in your Flutter applications.