In this tutorial, I'm going to show you how to build a simple Hero animation using Flutter.
Hero widget
The hero refers to the widget that flies between screens. The Hero widget in Flutter implements a style of animation commonly known as shared element transitions or shared element animations.
Now let's see how to use the Hero widget
let's see an example
import 'package:animation_tut/detials.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
child: Hero(
tag: "Img",
// the Tag is a string which specify the element that
// we want to animate
child: Container(
width: 200.0,
child: Image.asset("assets/image.png"),
),
//child can be what ever you want, it can be a simple container
// an image, a text or even a custom widget that you have built
),
),
RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetialsScreen(),
));
},
child: Text("Go to new activity"),
)
],
),
);
}
}
Now we are going to create a new dart file and we will call it details.dart, in this screen we are going to create the destination of our animation like this
So I made a simple details page just to show you the final result
import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Hero(
tag: "Img",
// the Tag is a string which specify the element that
// we want to animate
child: Column(
children: [
Image.asset("assets/image.png"),
Text("Your Article Title"),
Text("Your Article description")
],
),
//child can be whatever you want, it can be a simple container
// an image, a text or even a custom widget that you have built
),
),
);
}
}
Now if you run the app and test you will see the amazing hero animation
now let's see the same effect but with a better example
import 'package:animation_tut/detials.dart';
import 'package:flutter/material.dart';
import 'package:lipsum/lipsum.dart' as lipsum;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AnimationApp(),
);
}
}
class AnimationApp extends StatefulWidget {
@override
_AnimationAppState createState() => _AnimationAppState();
}
class _AnimationAppState extends State<AnimationApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text(
"Hero Animation",
style: TextStyle(
fontSize: 18.0,
),
),
centerTitle: true,
toolbarHeight: 60.0,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: SizedBox(
height: 500.0,
child: Card(
elevation: 2.0,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetialsScreen(),
));
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Hero(
tag: "img",
child: Image.network(
"https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=986&q=80",
),
),
),
SizedBox(
height: 20.0,
),
Text(
"Rome Is a Beautiful Place",
style: TextStyle(
color: Color(0xFF1a1a1a),
fontSize: 24.0,
),
),
SizedBox(
height: 10.0,
),
Text(lipsum.createWord(numWords: 50)),
],
),
),
),
),
),
),
),
);
}
}
and now this is the details page
import 'package:flutter/material.dart';
import 'package:lipsum/lipsum.dart' as lipsum;
class DetialsScreen extends StatefulWidget {
@override
_DetialsScreenState createState() => _DetialsScreenState();
}
class _DetialsScreenState extends State<DetialsScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Hero(
tag: 'img',
child: Image.network(
"https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=986&q=80"),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Rome Is a Beautiful Place",
style: TextStyle(
color: Color(0xFF1a1a1a),
fontSize: 24.0,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 10.0,
),
Text(lipsum.createParagraph(numParagraphs: 5))
],
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 22.0, left: 10.0),
child: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white,
size: 28.0,
),
onPressed: () {
Navigator.pop(context);
},
),
),
],
),
);
}
}
Make a Hero Animation In Fluter
Reviewed by Medics
on
September 12, 2020
Rating:
Reviewed by Medics
on
September 12, 2020
Rating:
Asking questions are actually pleasant thing if you are not understanding something fully, except this post presents good understanding yet.
ReplyDeleteGet Postal Code
ReplyDelete