Hero animation not working properly? - transition

Question

I am new in Flutter.
Today I created splash screen and login screen. Then I want to animate my logo from splash screen -> login screen.
But when I run code, the animation not working
here is my code:
Splash Screen
class SplashScreen extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new SplashScreenPage(),
routes: <String, WidgetBuilder>{
'/LoginPage': (BuildContext context) => new LoginPage()
},
);
}
}
class SplashScreenPage extends StatefulWidget{
SplashScreenPage({Key key, this.title}) : super(key: key);
final String title;
#override
State<StatefulWidget> createState() {
return new SplashScreenState();
}
}
class SplashScreenState extends State<SplashScreenPage>{
startTime() async {
var _duration = new Duration(seconds: 2);
return new Timer(_duration, navigationPage);
}
void navigationPage() {
Navigator.of(context).pushNamed('/LoginPage');
}
#override
void initState() {
startTime();
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new SizedBox(
child: new Hero(
tag: 'hero-tag-llama',
child: new Image.asset(
'images/logo_futurisx.png',
fit: BoxFit.cover,
height: 150.0,
)
),
)
],
)
),
);
}
Login screen
class LoginState extends State<LoginPage>{
final userNameController = new TextEditingController();
final passwordController = new TextEditingController();
#override
Widget build(BuildContext context) {
var _imageBox = new SizedBox(
child: new Hero(
tag: 'hero-tag-llama',
child: new Image.asset(
'images/logo_futurisx.png',
fit: BoxFit.cover,
height: 100.0,
)
),
);
var _loginForm = new Container(
padding: new EdgeInsets.all(32.0),
child: new Column(
children: <Widget>[
new TextField(
maxLines: 1,
controller: userNameController,
decoration: new InputDecoration(
border: new UnderlineInputBorder(),
fillColor: Colors.green,
hintText: "Username"
),
),
new Container(
padding: new EdgeInsets.only(bottom: 20.0),
),
new TextField(
maxLines: 1,
controller: passwordController,
decoration: new InputDecoration(
border: new UnderlineInputBorder(),
fillColor: Colors.green,
hintText: "Password"
),
),
new Container(
padding: new EdgeInsets.only(bottom: 30.0),
),
new RaisedButton(
padding: new EdgeInsets.fromLTRB(30.0, 10.0, 30.0, 10.0),
child: new Text("Login", style: new TextStyle(color: Colors.white)),
elevation: 4.0,
color: Colors.teal,
onPressed: (){
login(userNameController.text, passwordController.text);
}
),
])
);
return new Scaffold(
key: _scaffoldKey,
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_imageBox,
_loginForm
],
)
)
);
}
The video I uploaded here:
https://vimeo.com/271938052
When I comment the _loginForm layout in Login Screen,
children: <Widget>[
_imageBox,
//_loginForm
],
animation work normally. Can anyone help me know why animation not running as expect?
UPDATE -----------
After a lots of searching and fixing, i found that Timer may be block thread(or something similar,..) removed timer let button click action to change page, animation work normally.
Did someone meet this problem?

Answer 1

What happens here is that the Timer finishes before even starting the Hero animation. A workaround here is to increase the duration set on the Timer.