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:
Heroes are really great and helpful but I wanted to create such a transition within the same screen like this one:
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.
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.
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 method takes a direction and calls
moveToTarget if the direction is the target otherwise it calls
🔎 Example code
It’s always simpler to understand with an example:
⚡️ 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:
This code is pretty long, but it would have been even longer without the SidekickTeamBuilder 😄.
📦 The package
If this package is helping you, you can support me by ⭐️the repo, or 👏 this story.
You can also follow me on Twitter:
The latest Tweets from Romain Rastel (@lets4r). Software Engineer @ Orange Business Services 🇫🇷. @FlutterRennes…twitter.com
The latest Tweets from Flutter Community (@FlutterComm). Follow to get notifications of new articles and packages from…twitter.com
Let me know if you built an app with this package 😃.