Animation 01 | How to use the animation in the flutter?
In this tutorial, you will learn how to use the animation in the flutter.
In our apps, if we want to improve our user experience, the one way is adding some animation for our widget. It’s very important, so we must learn how to use it.
0. What we will implement？
As often we do, I will let you see the result we get so that you can choose to learn or not, it will save your time. In the below gif, we can see that we will make the logo of Flutter Open rotating and changing the scale. Before starting, you should know how to use some simple widgets, such as Row,Column .
1. Create a StatefulWidget
First, we should create a page to show our code. I define a WelcomePage for it.
import "package:flutter/material.dart";
import 'package:flutter_animation/constant/image_const.dart';
import 'dart:math';class WelcomePage extends StatefulWidget {
@override
_WelcomeState createState() => _WelcomeState();
}class _WelcomeState extends State<WelcomePage> {
@override
void initState() {
super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Open"),
),
body: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 6,
child: Container(
alignment: AlignmentDirectional.center,
child: Container(
margin: EdgeInsets.only(top: 50.0),
child: Transform.rotate(
angle: -pi / 2,
child: Image.asset(
ImagePath.FLUTTER_OPEN,
fit: BoxFit.fitHeight,
width: 200,
height: 200,
),
),
),
),
),
Expanded(
flex: 1,
child: Center(
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.refresh),
),
))
],
),
),
);
}
}
It will show like this.
2. Init animation
In our animation, we should know some class, `SingleTickerProviderStateMixin`, `AnimationController`,`Animation`, they are very important to comply with our animation. `SingleTickerProviderStateMixin` manages our animation time, `AnimationController` will manage our animation, such as start, stop. Animation will recode our change value, and listen to our animation state.
First, we should with SingleTickerProviderStateMixin on the _WelcomeState, which means we can call the function in the _WelcomeState .
class _WelcomeState extends State<WelcomePage> with SingleTickerProviderStateMixin{
///other code should retain,do not delete them.}
Then, init animation and animation controller in the initState . In this step we also add some listener for it.
AnimationController _controller;
Animation _animation;@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween(begin: 50.0, end: 200.0).animate(_controller)
..addStatusListener((state) {
if (state == AnimationStatus.completed) {
print("completed");
} else if (state == AnimationStatus.dismissed) {
print("dismissed");
}
})
..addListener(() {
print("value:${_animation.value}");
});
}
If you do this, we can use the animation now. Look at the code, it will start our animation. It does not show anything for us. It just changes _animation.value and listeners , we don’t fell it, but you can say the log. Be careful, when you want see the log, you should start the app, not just hot reload.
_controller.forward();So we should set the _animation.value to our widget. Changing the part code, we change the angle from -pi/2 to -2*pi*_animation.value/200 ,and the width, height of the image from 200 to _animation.value .
child: Transform.rotate(
angle: -2*pi*_animation.value/200,
child: Image.asset(
ImagePath.FLUTTER_OPEN,
fit: BoxFit.fitHeight,
width: _animation.value,
height: _animation.value,
),
),Most important, we should change the listener
..addListener(() {
setState(() {});
})You can run it again, it will show you a wonderful animation. If you want to start animation just when you click the button, you can call forward() in the onPress function, if want to see the repeat effect, you can can repeat() too.
onPressed: () {
_controller.repeat();
},Finally, don’t forget to dispose the animation.
@override
void dispose() {
_controller.dispose();
super.dispose();
}The whole code.
import "package:flutter/material.dart";
import 'package:flutter_animation/constant/image_const.dart';
import 'dart:math';class WelcomePage extends StatefulWidget {
@override
_WelcomeState createState() => _WelcomeState();
}class _WelcomeState extends State<WelcomePage>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation; @override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween(begin: 50.0, end: 200.0).animate(_controller)
..addStatusListener((state) {
if (state == AnimationStatus.completed) {
print("completed");
} else if (state == AnimationStatus.dismissed) {
print("dismissed");
}
})
..addListener(() {
print("value:${_animation.value}");
setState(() {});
});
_controller.forward();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Open"),
),
body: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 6,
child: Container(
alignment: AlignmentDirectional.center,
child: Container(
margin: EdgeInsets.only(top: 50.0),
child: Transform.rotate(
angle: -2 * pi * _animation.value / 200,
child: Image.asset(
ImagePath.FLUTTER_OPEN,
fit: BoxFit.fitHeight,
width: _animation.value,
height: _animation.value,
),
),
),
),
),
Expanded(
flex: 1,
child: Center(
child: FloatingActionButton(
onPressed: () {
_controller.repeat();
},
child: Icon(Icons.refresh),
),
))
],
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
Conclusion
In this tutorial, we learn how to use the animation in the flutter.
- We know the most important class, `SingleTickerProviderStateMixin`,`AnimationController`, `Animation`.
- Set
animation.valueto our widget. - add ```setState(() {});``` in the addListener to update the widget.
The whole project, star to support: https://github.com/nb312/flutter-animations
The end, good look.
#Facebook page: Flutter Open
#Facebook group: Flutter Open
#Developer Github: NieBin
