Building Custom Transitions with Hero and Shared Z-Axis Animations in Flutter

Introduction

In Flutter mobile development, engaging users often hinges on smooth, visually coherent transitions. The Hero widget provides a straightforward way to animate a widget “flying” from one route to another. Google’s Material motion system extends this concept with shared Z-axis animations, enabling layered, depth-aware transitions that reinforce spatial relationships. In this tutorial, you’ll learn how to implement custom Hero flights and combine them with shared Z-axis motion to create polished, production-ready transitions.

Setting Up Hero Widgets

Hero animations require two widgets sharing the same tag across routes. Begin by wrapping the source widget in a Hero and assigning a unique tag. In the destination route, wrap the target widget in a Hero with the same tag.

// Source Route
Hero(
  tag: 'itemHero',
  child: Image.asset('assets/item.png', width: 100),
)

// Destination Route
Hero(
  tag: 'itemHero',
  child: Image.asset('assets/item.png', width: 300),
)

When you navigate (Navigator.push), Flutter automatically animates the image scaling and moving between routes. You can supply a custom flightShuttleBuilder to override the default tween.

Customizing Flight Animation

To gain full control over the transition, implement the flightShuttleBuilder. This callback receives the flight context and lets you return any widget for the in-flight representation.

Hero(
  tag: 'itemHero',
  flightShuttleBuilder: (flightContext, animation, direction, from, to) {
    return ScaleTransition(
      scale: CurvedAnimation(
        parent: animation,
        curve: Curves.elasticOut,
      ),
      child: to.child,
    );
  },
  child: Image.asset('assets/item.png'),
)

Here, the ScaleTransition applies an elastic curve, giving the hero a pop effect. You can chain additional transitions like FadeTransition or RotationTransition to further customize the flight.

Implementing Shared Z-Axis Transitions

Shared Z-axis transitions adjust the elevation and scale of elements to simulate depth. In Flutter’s PageTransitionsTheme, you can define a custom SharedAxisPageTransitionsBuilder for Android and iOS platforms.

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(builders: {
      TargetPlatform.android: SharedAxisPageTransitionsBuilder(
        transitionType: SharedAxisTransitionType.scaled,
      ),
      TargetPlatform.iOS: SharedAxisPageTransitionsBuilder(
        transitionType: SharedAxisTransitionType.scaled,
      ),
    }),
  ),
  home: HomePage(),
);

With this configuration, any Navigator.push will trigger a shared Z-axis scaled transition—widgets cross-fade while adjusting scale and elevation.

Chaining Multiple Transitions

You’re not limited to a single type of animation. Combine Hero flights with shared Z-axis transitions by wrapping your pages in a transition widget or customizing the PageRoute.

Navigator.of(context).push(PageRouteBuilder(
  pageBuilder: (c, a1, a2) => DetailPage(),
  transitionsBuilder: (c, anim, secAnim, child) {
    final scale = Tween(begin: 0.9, end: 1.0).animate(
      CurvedAnimation(parent: anim, curve: Curves.easeOut),
    );
    return FadeTransition(
      opacity: anim,
      child: ScaleTransition(scale: scale, child: child),
    );
  },
));

This example applies both fade and scale to the entire page while the Hero widget animates simultaneously. Use anim.drive to synchronize multiple tweens along different curves.

Tips for Performance and Best Practices

1. Limit hero animations to key UI elements to avoid jank. Excessively large images can tax the GPU.

2. Use lightweight, vector-based assets for hero flights where possible.

3. Avoid animating expensive layout widgets; pre-cache images or leverage RepaintBoundary.

4. Profile transitions using the Flutter performance overlay.

5. For complex flows, break routes into sub-routes and apply localized transitions to reduce route complexity.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Custom Hero animations combined with shared Z-axis transitions elevate your Flutter mobile development UX by reinforcing spatial continuity. By mastering flightShuttleBuilder, SharedAxisPageTransitionsBuilder, and custom PageRouteBuilders, you can craft seamless, depth-aware animations. Apply the performance tips above to ensure transitions stay smooth on a range of devices.