Hero Animations In Flutter
In this blog, we will explore the Hero Animations in a flutter. We will be using some core functions available in a flutter to achieve this without any third party application. We will implement a demo of the Hero Animation in your flutter applications.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
Hero Animation :
Hero widget is a great out-of-the-box animation for communicating the navigation action of a widget flying from page to page. Hero animation is a shared element transition (animation) between two different pages. Now to See this, Imagine a superhero flying in action. For example, you must have an image list. As we wrap it with a hero tag. Now we tap on an item list. and when tapped. Then the images list item lands its position on the detail page. when we cancel it and come back to the list page, then the hero widget returns to its page.
Demo Module :
Code Implementation
Create a new dart file calledhero_animation_list inside the lib folder.
In this screen use the PageRouteBuilder class to create a custom root. It Provides animation object. The PageViewBuilder has a transitionDuration function that sets animation durations. Builder function is used to create route content add the transition builder function.
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds:900),
pageBuilder: (_, __, ___) => ListDetail(index: index),
settings: RouteSettings(
arguments: heroAnimationListModel[index],
),
));
The Hero widget is the marked for hero animations. when the naviagator push or pop pageroot,the entire screen content changes.But it displays and resizes from page to another page.
//Hero Animation list page.
Hero(
tag: "ImageTag" + index.toString(),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
child: Image.asset(
item.img,
width: _width,
fit: BoxFit.fill,
),
),
),
In this Detail Screen, we have used the same tag of the hero widget from the list page (Main Page) which transitions the hero animation.
Hero(
tag: "ImageTag" + widget.index.toString(),
child: Image.asset(
heroAnimationListModel.img,
fit: BoxFit.cover,
)),
Code File :
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_hero_animation_demo/Constants/constants.dart';
import 'package:flutter_hero_animation_demo/list_detail.dart';
import 'package:flutter_hero_animation_demo/model/hero_animation_list_model.dart';
class HeroAnimationList extends StatefulWidget {
@override
_HeroAnimationListState createState() => _HeroAnimationListState();
}
class _HeroAnimationListState extends State<HeroAnimationList> {
double _height;
double _width;
int _selectedIndex;
List<HeroAnimationListModel> heroAnimationListModel;
PageController pageController;
@override
void initState() {
heroAnimationListModel = Constants.getHeroAnimationListModel();
pageController = PageController(viewportFraction: 6.0);
super.initState();
}
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey[50],
title: Text(
'Hero Animation',
style: TextStyle(color: Colors.black),
),
centerTitle: true,
elevation: 0.0,
),
body: Container(
margin: EdgeInsets.only(left: 20, right: 20),
child: ListView.builder(
controller: PageController(viewportFraction: 0.4),
itemCount: heroAnimationListModel.length,
scrollDirection: Axis.vertical,
//shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return _buildHeroAnimationList(
heroAnimationListModel[index], index);
}),
),
);
}
Widget _buildHeroAnimationList(HeroAnimationListModel item, int index) {
return InkWell(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds:900),
pageBuilder: (_, __, ___) => ListDetail(index: index),
settings: RouteSettings(
arguments: heroAnimationListModel[index],
),
));
},
child: Container(
// padding:EdgeInsets.only(left:30.0,right:0.0),
margin: EdgeInsets.only(top: 10.0),
//height:_height/2.9,
//width: _width /20,
// color: Colors.cyan,
child: Column(
children: [
Stack(
children: [
Container(
height: _height / 4,
width: _width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: item.color,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 110,
child: Hero(
tag: "ImageTag" + index.toString(),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
child: Image.asset(
item.img,
width: _width,
fit: BoxFit.fill,
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 15.0, right: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Hero(
tag: "TextTagOne" + index.toString(),
transitionOnUserGestures: true,
child: Material(
type: MaterialType.transparency,
child: Text(
item.title,
style: TextStyle(
fontSize: 16.0,
letterSpacing: 0.5,
fontWeight: FontWeight.w700),
),
),
),
Hero(
tag: "TextTagTwo" + index.toString(),
transitionOnUserGestures: true,
child: Material(
type: MaterialType.transparency,
child: Text(
item.subTitle,
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w600,
color: Colors.black54,
letterSpacing: 0.2),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
),
],
),
),
],
),
],
),
),
);
}
}
Conclusion :
In this article, I have explained a Hero Animation demo, you can modify and experiment according to your own, this little introduction was from the Hero Animation our side.
I hope this blog helps will provide you with sufficient information in Trying up the Hero Animation in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences
