Animating Flutter widgets with Sidekicks

Every Hero needs a Sidekick

Animations can turn a great app into an astounding and unforgettable one. They are a big part of the user experience and without them, an application doesn’t really look attractive.

Thanks to Flutter, it’s easier than ever to animate the UI of your app in order to reinforce the user’s action.
For example, it’s pretty straightforward to create a transition between two screens by animating a common element with the Hero widget:

Hero transition from Reflectly app

Heroes are really great and helpful but I wanted to create such a transition within the same screen like this one:

Workout app concept by Vitaly Rubtsov on Dribbble

But some heroes have a colossal ego and prefer big adventures, so they leave these kinds of missions to their sidekicks 😃.

🚀 From Hero to Sidekick

Heroes can’t do these animations because they rely on route transitions to start them. But as Flutter is open source, I looked at the Hero source code to see how it was implemented and how I could reproduce the same kind of effect.

It turned out that a lot of code could be reused to do what I wanted to create.
So I implemented a new widget called Sidekick which is heavily based on the Hero widget code.

Before reading further, I strongly suggest you learn how heroes work if you don’t know it already 😉.

You can find useful information here and there.

The first difference you’ll notice between Hero and Sidekick is that a Sidekick has a targetTag property. We don’t have to specify it for Hero because the source and target heroes are implicitly linked by the route transition. But in the case of Sidekicks, the animation is not triggered automatically, and we need a way to link the source and the destination widgets.

The targetTag property must only be set on the source Sidekick, it’s how the system will distinguish the source from the destination.

To start the animation I created a SidekickController which is an Animation<double> so that you can listen to it.
To start an animation you will use one of the following method: move, moveToTarget or moveToSource.

The move method takes a direction and calls moveToTarget if the direction is the target otherwise it calls moveToSource.

🔎 Example code

It’s always simpler to understand with an example:

Simple Sidekick animation

Source code for the above animation

⚡️ The true power of the Sidekick

The previous example was really simple, and maybe you are wondering this:

How can we do something like the workout app concept? It will involve a lot of Sidekicks, a lot of SidekickControllers, some state management and maybe headaches, no? 🤕.

Well, I’ve been there, and Sidekicks are better when they create a team and work together!

💪 The SidekickTeamBuilder

This is the widget you’ll need when you’ll want to create this kind of UI:

This widget will take care of all the Sidekicks, the SidekickControllers, and even the state management implied by having two lists of elements and transferring elements from one list to the other.

Let’s have a look at the code used to create this:

Source code for the above animation

This code is pretty long, but it would have been even longer without the SidekickTeamBuilder 😄.

📦 The package

These widgets are available under the flutter_sidekick package. It’s open source, and you can find the source code here.

If this package is helping you, you can support me by ⭐️the repo, or 👏 this story.

You can also follow me on Twitter:

Romain Rastel (@lets4r) | Twitter

Flutter Community (@FlutterComm) | Twitter

Let me know if you built an app with this package 😃.