Create simple animations for your articles with Flutter.
In a previous article, I explained how I reproduced the iOS sliding row animation in Flutter, through my Slidable widget. In that article I used some animations to illustrate my words and today I’m going to show you how I created them.
📐 The tools
I first looked for animations tools, but I didn’t want anything complicated, nor invest money and time for such simple animations. So I thought “Why do not just use Flutter?”
I tried something and it was really easy to create the animations I wanted, so I entirely coded my animations in Dart using Flutter 😄, isn’t it beautiful? It was like using a compiler to compile the compiler.
Once I had the animation, I just had to recorded it and transform it into a GIF. I used an emulator and recorded the interesting part of the screen with ScreenToGif for that. I find this tool quite simple for my needs.
The last part is the easy one, and I will not dwell on the subject. Let’s focus on the Flutter part 🔍.
📄 The code
If you want to create your own staggered animations, I suggest you to read this official tutorial which is excellent: https://flutter.io/animations/staggered-animations/
The following content it’s based on this tutorial, so you will find some similarities.
Animation n°1
I’m starting with the most complicated animation, but it’s also the only one I’m going to detail.
Before diving into the code, let me show you the different animations and intervals used:
◼️ Items move upwards and skew during the first 30% of the timeline.
◼ Items move to the right during the next 30%.
◼ Items move downwards and get their shape back during the next 30%.
◼ Nothing animates during the last 10% of the timeline.
To create staggered animations, the easiest way is to create one AnimationController that manages all of the animations and to animate them with a CurvedAnimation which takes a parent animation (the animation controller) and a Curve. The Curve, here, is a special one: the Interval. It allows us define the part of the parent timeline in which the child animation will be animated from beginning to end:
This is a quote from the flutter.io website that describes how I designed my example:
Like all interactive widgets, the complete animation consists of a widget pair: a stateless and a stateful widget.
The stateless widget specifies the Tweens, defines the Animation objects, and provides a
build()function responsible for building the animating portion of the widget tree.The stateful widget creates the controller, plays the animation, and builds the non-animating portion of the widget tree. The animation begins when a tap is detected anywhere in the screen.
In the stateless widget, the tweens are created in the constructor:
The value of the intervals are stored in constants:
The build() function creates an AnimatedBuilder that takes a builder function (named _buildAnimation() here) and calls it when the animation controller notifies its changes.
It’s the buildAnimation() function which does all the heavy work 💪 :
The SkewTransition is a custom animated widget which is heavily inspired by the ScaleTransition widget. It’s the widget which controls the skew of the child:
The SlideTransition widgets control the positions of the different children.
The stateful widget looks a lot like the one you can found in the flutter.io tutorial:
This is all the code to run this example (less than 350 lines 😄):
Animation n°2
For this simpler animation, we have to keep only one SlideTransition, removes the slide actions, and change the interval and total duration:
Animation n°3
For this animation, we have to keep only one SlideTransition, modify the cross axis alignment, inverse the order of the children, and change the interval and total duration:
📕 Conclusion
With Flutter, no need for an extra tool, we can create simple animations and post them in articles like this one 😎. Sharing knowledge with Flutter becomes so easier 👍.
For a developer I find this very interesting for prototyping, because thanks to hot reload and hot restart, it really fast to change something, see how it behaves and to start again until we get what we want.
If you have any questions / suggestions, leave a comment below ✏️.
You can also follow me on Twitter:
