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,
),
);
},
),
);
Comments