One of the basic animation in flutter is the Hero Animation. So what really is a Hero Animation?
Requirements:
"I assume in this tutorial that you already have knowledge to setup flutter project. Ready your project and we will start with a basic main.dart." :)
Let's use StatelessWidget since we don't need to change or save a state in our main.
Make a directory inside your lib, name it screens. Inside the screens create 2 screens, home.dart and login.dart. We will set the home.dart as our homepage in the main.dart.
Main.dart
Let's prepare our main.dart. Make a scaffold and set the home in a class named login.dart
In our code above, change the return from Container to Materialapp() class. Add a property home then make the value login(). It is the class of our login screen.
Our app will show a squiggly line on Login() because it can't find the class in current file. We need to to create the login class then import it in the main.dart. For now we can already add the import even if we haven't created the class as you can see the line import './screens/login.dart';
Requirements:
1. You can already create a flutter project.
2. A sample flutter project that we can use in this tutorial.
Let's use StatelessWidget since we don't need to change or save a state in our main.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
Creating a Screen
Make a directory inside your lib, name it screens. Inside the screens create 2 screens, home.dart and login.dart. We will set the home.dart as our homepage in the main.dart.Main.dart
Let's prepare our main.dart. Make a scaffold and set the home in a class named login.dart
In our code above, change the return from Container to Materialapp() class. Add a property home then make the value login(). It is the class of our login screen.
import 'package:flutter/material.dart';
import './screens/login.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Login(),
);
}
}
Our app will show a squiggly line on Login() because it can't find the class in current file. We need to to create the login class then import it in the main.dart. For now we can already add the import even if we haven't created the class as you can see the line import './screens/login.dart';
Login.dart
Import marteriall.dart and create a StatelessWidget class of login
import 'package:flutter/material.dart';
import './home.dart';
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Login Page'),leading: Container(
child: Hero(
tag: 'logo',
child: Icon(
Icons.star,color:Colors.yellow,size: 30,
)
),
),),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: RaisedButton(
color: Colors.blueAccent,
child: Text('Go to Home'),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context){
return Home();
}
),
);
},
),
)
],
),
);
}
}
Home.dart
import 'package:flutter/material.dart';
import 'package:hero/screens/login.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home Page'),),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Hero(
tag: 'logo',
child: Icon(
Icons.star,color:Colors.yellow,size: 250,
)
)
),
RaisedButton(
color: Colors.blueAccent,
child: Text('Go to login'),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context){
return Login();
}
),
);
},
)
],
),
);
}
}
Study
Hero(
tag: 'logo',
child: Icon(
Icons.star,color:Colors.yellow,size: 30,
)
),
As you can see how we use the Hero widget in login.dart, we put the icon widget inside the Hero Widget. The Hero widget basically needs 2 properties, tag and child.
The tag is the one that identifies the widget you want to be animated which is in this case is our Icon Star. The tag must be in both screen that will have transition, it must have the same tag.
The tag is the one that identifies the widget you want to be animated which is in this case is our Icon Star. The tag must be in both screen that will have transition, it must have the same tag.
Difference between login.dart and home.dart
The difference between the two screen is that the Hero widget of home.dart and its icon star is locted in the appbar while in the the login.dart's Hero is located in the body. This will help you easily notice the transition where the star becomes smaller and jumped to the appbar of the homepage
login.dart
appBar: AppBar(title: Text('Login Page'),leading: Container(
child: Hero(
tag: 'logo',
child: Icon(
Icons.star,color:Colors.yellow,size: 30,
)
),
)
home.dart
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Hero(
tag: 'logo',
child: Icon(
Icons.star,color:Colors.yellow,size: 250,
)
)
),
]
)
Comments:
Post a Comment
Enter your comment...