Implicit animation falls under code-based animations. It’s usually very simple to implement compared to other types of animation. All you need to do is set a new value and hit a setState to animate the widget to the new value.
The aim is to make the rocket fly with the click of the launch button. Technically, you just have to change the position of the rocket when the button is clicked:
Wrap the rocket image inside the AnimatedContainer
duration: Duration(milliseconds: 500),
Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
// Night sky image here
AnimatedContainer(
duration: Duration(milliseconds: 500),
height: 350,
width: 250,
margin: EdgeInsets.only(bottom: bottomMargin),
child: Image.asset('assets/images/rocket.png'),
),
// Launch button here
],
)
For any implicit widget, the duration argument is required to determine the time to finish the animation.
In this example, we’re asking the rocket to reach the top in half a second by setting the duration parameter to 500 milliseconds:
duration: Duration(milliseconds: 500),
The bottom margin is currently set to the bottomMargin variable, which is 0 when the app starts.
double bottomMargin = 0;
Once the button is clicked, the only thing left is to set the new value. In this case, we’ll increase the bottomMargin to 500:
RaisedButton(
onPressed: () {
_flyRocket();
},
child: Text(
'Launch',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
),
)
void _flyRocket() {
setState(() {
bottomMargin = 500;
});
}
