Hey there! Great question—Hero is definitely a go-to for image transitions, but it’s not the only option when you need to replicate more complex or non-image animations. Let’s walk through the best approaches depending on your specific use case:

1. 自定义页面过渡：PageRouteBuilder #

If you’re looking to animate any widget between pages (not just images), PageRouteBuilder is your best bet. It lets you fully control the transition animation by defining a transitionsBuilder—you can combine scaling, fading, sliding, or any other animation curve you want.

Here’s a quick example of a custom scale-and-slide transition:

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.easeInOut;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      var offsetAnimation = animation.drive(tween);

      return SlideTransition(
        position: offsetAnimation,
        child: ScaleTransition(
          scale: animation.drive(Tween(begin: 0.8, end: 1.0).chain(CurveTween(curve: curve))),
          child: child,
        ),
      );
    },
  ),
);

2. 复杂共享元素过渡：GlobalKey + AnimatedBuilder #

For scenarios where you need to animate multiple widgets or match precise layout properties (like size, position, or color) between screens, use GlobalKey to grab the widget’s render information, then build a custom animation with AnimatedBuilder.

Here’s the core idea:

• Assign a GlobalKey to the widget you want to animate on both the source and destination screens.
• Use RenderBox to get the widget’s position and size in the source screen.
• Animate the destination widget’s properties to match the source’s initial state, then transition to its final state.

Example snippet for getting render data:

final renderBox = _sourceKey.currentContext?.findRenderObject() as RenderBox;
final sourceOffset = renderBox.localToGlobal(Offset.zero);
final sourceSize = renderBox.size;

You can then use these values in an AnimatedBuilder to tween the destination widget’s Positioned or SizeTransition properties.

3. 官方预设过渡：animations包 #

The Flutter team’s animations package provides pre-built, polished transitions that work great for page-to-page animations—including shared element-like effects without limiting you to images. For example, SharedAxisTransition creates smooth transitions along a shared axis (horizontal, vertical, or depth), perfect for navigation flows.

First, add the package to your pubspec.yaml:

dependencies:
  animations: ^2.0.7

Then use it in your navigation:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SharedAxisTransition(
        animation: animation,
        secondaryAnimation: secondaryAnimation,
        transitionType: SharedAxisTransitionType.horizontal,
        child: child,
      );
    },
  ),
);

4. 页面内组件切换：AnimatedSwitcher #

If your animation is within the same screen (not between pages), AnimatedSwitcher simplifies swapping widgets with built-in or custom animations. It automatically animates the transition when the child widget changes.

Example:

AnimatedSwitcher(
  duration: const Duration(milliseconds: 300),
  transitionBuilder: (child, animation) {
    return ScaleTransition(scale: animation, child: child);
  },
  child: _isVisible ? const VisibleWidget() : const HiddenWidget(),
)

Quick Recommendation #

• For simple page transitions beyond Hero: Use PageRouteBuilder or the animations package.
• For complex multi-element shared transitions: Go with GlobalKey + AnimatedBuilder.
• For in-screen widget swaps: Stick with AnimatedSwitcher.

内容的提问来源于stack exchange，提问作者Maine