Flutter Animation Series Part 3 - Hero Animations and Page Transitions

Smooth and seamless page transitions can significantly enhance the user experience of a Flutter app. In this third part of our Flutter Animation Series, we explore Hero animations and custom page transitions—two powerful techniques to make screen navigation visually engaging.

Introduction

Smooth and seamless page transitions can significantly enhance the user experience of a Flutter app. In this third part of our Flutter Animation Series, we explore Hero animations and custom page transitions—two powerful techniques to make screen navigation visually engaging.

Hero Animations

Hero animations in Flutter are a fantastic way to create fluid transitions between screens. They allow a widget to “fly” from one screen to another, typically maintaining the same visual state but moving across different routes. This effect can help users intuitively understand the flow of the app, especially when elements are visually tied together across pages.

How Hero Animations Work

To create a Hero animation in Flutter, you just need to enclose the widget you wish to animate within a Hero widget and assign it a unique tag. This tag serves as an identifier that connects the widget instances on both the current screen and the destination screen.

sending_screen.dart

class SendingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sending Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ReceivingScreen()),
            );
          },
          child: Hero(
            tag: 'hero-tag', // Unique identifier
            child: Image.asset('assets/item.png'),
          ),
        ),
      ),
    );
  }
}

receiving_screen.dart

class ReceivingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Receiving Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-tag', // Same tag as the sending screen
          child: Image.asset('assets/item.png'),
        ),
      ),
    );
  }
}

Customizing the Hero Animation

The flightShuttleBuilder property allows you to define a custom widget that appears during the Hero animation. This is useful when you want to control how the widget looks while transitioning between screens.

hero.dart

Hero(
  tag: 'hero-tag',
  flightShuttleBuilder: (
    BuildContext flightContext,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    // Example of a custom curve
    return ScaleTransition(
      scale: CurvedAnimation(
        parent: animation,
        curve: Curves.elasticInOut,
      ),
      child: child,
    );
  },
  child: Image.asset('assets/item.png'),
)

Custom Page Transitions

Custom page transitions allow you to have full control over how screens transition in your Flutter app. Instead of the default fade or slide transitions, you can create unique animations to match your app’s branding or desired flow.

page_transition.dart

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => ReceivingScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(animation);
      var scaleAnimation = Tween(begin: 0.8, end: 1.0).animate(animation);

      return FadeTransition(
        opacity: fadeAnimation,
        child: ScaleTransition(
          scale: scaleAnimation,
          child: child,
        ),
      );
    },
  ),
);