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: