A useful skill in Flutter is mastering Hero Animations, which allow you to create smooth and engaging transitions between screens by animating a widget (such as an image or text) across route changes.
Example: Hero Animation
This code demonstrates a simple Hero animation where an image transitions smoothly between two screens:
- Main Screen with a small image:
- Detail Screen where the image appears larger.
Step 1: Create Main Screen
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Main Screen")),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => DetailScreen()),
);
},
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://via.placeholder.com/150',
width: 150,
height: 150,
),
),
),
),
);
}
}
Step 2: Create Detail Screen
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Detail Screen")),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://via.placeholder.com/150',
width: 300,
height: 300,
),
),
),
),
);
}
}
How it Works:
-
Hero Widget: Wrap the widget you want to animate with a
Herowidget and assign it a uniquetag. -
Smooth Transition: When navigating between screens, Flutter automatically animates the
Herowidget between the two routes.
This is a great way to improve the UX of your app by providing visually appealing transitions with minimal effort.
Top comments (0)