Hero, page transitions and Lottie or Rive

Hero: shared element transitions

When a user taps a product photo in a grid and the details page opens, a Hero animation makes the photo smoothly fly and grow from its grid position to its place on the new page. This visual link tells the user "this is the same item, now bigger". Wrap the widget in Hero on both screens with the same, unique tag; Flutter does the rest during navigation.

// In the grid (first screen):
Hero(
  tag: 'product-${product.id}',
  child: Image.network(product.imageUrl, fit: BoxFit.cover),
)

// On the details page (second screen):
Hero(
  tag: 'product-${product.id}',
  child: Image.network(product.imageUrl, height: 300, width: double.infinity, fit: BoxFit.cover),
)

Hero works with Navigator and with go_router.

Custom page transitions

Route<void> slideUpRoute(Widget page) => PageRouteBuilder(
      transitionDuration: const Duration(milliseconds: 300),
      pageBuilder: (context, animation, secondaryAnimation) => page,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        final offset = Tween(begin: const Offset(0, 1), end: Offset.zero)
            .chain(CurveTween(curve: Curves.easeOutCubic))
            .animate(animation);
        return SlideTransition(position: offset, child: child);
      },
    );

// Navigator.push(context, slideUpRoute(const FiltersPage()));

Use custom transitions sparingly and consistently. Platform-default transitions (from MaterialPageRoute) already feel right on Android and iOS; a custom transition is best kept for special flows like a filter sheet or an onboarding sequence.

Lottie and Rive

Some animations, like a delivery scooter riding across the screen, a celebratory confetti burst or an animated empty-state illustration, are much easier for a designer to create than for a developer to code. Lottie plays animations exported as JSON from After Effects (via the Bodymovin plugin); Rive is a design tool whose interactive animations can react to app state through state machines. Both have Flutter packages on pub.dev.

// pubspec: lottie package; asset: assets/anim/success.json
Lottie.asset('assets/anim/success.json', width: 160, repeat: false)

Respecting reduced motion

Some users turn on "remove animations" or reduced motion in system settings because motion makes them dizzy or distracted. Flutter exposes this as MediaQuery.disableAnimationsOf(context). When it is true, shorten or skip decorative animations, keeping only essential feedback.

final reduce = MediaQuery.disableAnimationsOf(context);
final duration = reduce ? Duration.zero : const Duration(milliseconds: 300);

Common mistakes

• Duplicate Hero tags on one screen.
• Hero children that look very different on the two screens (text styles jumping): keep them visually similar.
• Heavy Lottie files (several MB) on the home screen: slow start-up.
• Animations everywhere, ignoring reduced-motion settings.