This is a step-by-step tutorial to show you a straightforward way to add animations to your app. This article will help you find the best way to create animations and fancy visual effects for the widgets in your App.
More Tutorials:
- Flutter Animation Tutorial #1 built-in animation
- Flutter Animation Tutorial #2 Tween animation
- Flutter & Firebase App Tutorial
There are lots of different ways to create animations in Flutter and sometimes you see various ways to create the same kind of animation and you just want to aminate something in a way that has more controls than using a built-in animated widget.
Overall, there are 2 kinds of animations in Flutter. Which one to use depends on the animation you try to make and how you prefer to code and structure your code.
1️⃣ Implicit Animation: it gives you less control but it’s a lot easier to create by using either custom or built-in animated widgets. In Flutter, you can make your own custom implicit Animation.
2️⃣ Explicit Animation: it gives you more control by using animation controllers but it’s more complex to create. In general, if the animation repeats over and over without stopping or requires control, we use Explicit Animation with an animation controller to create it.
Table of Contents
- Build-in implicit amination
- implicit amination: AnimatedOpacity
⏩ Build-in implicit amination
You can either make your own custom implicit Animation or use build-in implicit amination widgets. The documentation provided by Flutter is here.
✅Using build-in implicit amination that Flutter gives us:
Step 1️⃣: To begin with, we’ll place an AnimatedContainer()widget as the body.
Flutter gives us animated versions of the widgets that we already use. We use an animated container widget and then we can animate the properties inside that widget.
@override
Widget build(BuildContext context){
return Scaffold(
body:AnimatedContainer()
)
}Step 2️⃣: Sometimes you want to animate 2 or 3 different properties all at once, for example, margin and width.
Step 2.1 ➡️ Set the property _colorto blue initially. We will animate it to a different color later on.
Step 2.2 ➡️ Set the parameterdurationthat is a duration object and inside the object, we specify seconds and set the seconds to be equal to 2.
The AnimatedContainer()widget will need to know how long it’s gonna take to animate the _color.In other words, over what duration do you want to animate the _color.
Color _color = Colors.blue;@override
Widget build(BuildContext context){
return Scaffold(
body:AnimatedContainer(
duration: Duration(seconds: 2),
color: _color,
)
)
}
Step 3️⃣: Fire the animation:
We now have the _colorstarting with a value of Colors.blueand we want to animate the value to something else.
Hence, we place a button inside this container, and when we click on the button, it’s gonna animate the value of the _colorto a different color.
The onPreddedinside the button is a function, and inside the function, we setState to update the value of the _color.Inside the setState, it’s a function whereby we update the _colorto Colors.red.
Color _color = Colors.blue;@override
Widget build(BuildContext context){
return Scaffold(
body:AnimatedContainer(
duration: const Duration(seconds: 3),
color: _color,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children:[
RaisedButton(
child: Text('animate colour'),
onPressed: () => setState(()=> _color =Colors.red)
)]
)
)
)
}
Since we are in an animated container, AnimatedContainer(), it’s gonna animate automatically from the initial value to a new value. Read more about Flutter’s animation on this page.
⏩ AnimatedOpacity
To automatically transition the opacity over a given duration, we use AnimatedOpacityto fade a widget into view.
➡️ Wrap your widget with an AnimatedOpacity widget
➡️ Set duration for how long you want the transition between opacities to last.
➡️ Set the opacity parameter
✅ opacity = 0: means invisible
✅ opacity = 1: means completely visible
✅ curve: control the rate that the opacity transitions over time. By default, its value is Curve.linear.
double _opacity = 1;@override
Widget build(BuildContext context){
return Scaffold(
body:AnimatedContainer(
duration: const Duration(seconds: 3),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children:[
RaisedButton(
child: Text('animate opacity'),
onPressed: () => setState(()=> _opacity =0)
),
AnimatedOpacity(
duration: Duration(seconds: 2),
curve: Curves.bounceInOut,
child: Text('Hide Me',
style: TextStyle(color: Colors.white)),
opacity: _opacity,
),
]
)
)
)
}
You will see the Text faded gradually when the opacity changes from the initial value to the new value
More Tutorials:
- Flutter Animation Tutorial #1 built-in animation
- Flutter Animation Tutorial #2 Tween animation
- Flutter & Firebase App Tutorial
Your support would be awesome❤️
Having more followers will encourage me to write more articles.
👉 The source code is updated on Github
