Custom animated control elements with Flutter

⚠ This article covers a previous version of Simple Animation. The basics stay the same but class names have changed.

In this article I want to show you, how to use the simple_animations package for creating custom animated control elements.

Checkbox-like UI control

This “form control” acts like a checkbox but it has a cool switch animation. During the animation it changes four different properties:

• left padding: it’s moving from left to right,
• rotation: from -360° (=-2*pi) to 0° (=0pi),
• color: grey to blue,
• text string: changing “off” to “on” in the middle of the animation.

Also we need the checked state (Is the checkbox currently checked?) as an input property to control the animation.

We simply define the animation by using a MultiTrackTween (Animatable that tween multiple properties at once). We pass this tween into a ControlledAnimation (widget for simple tween-based animations).

We will bind the checked input property to ControlledAnimation’s playback and startPosition property:

playback: checked ? Playback.PLAY_FORWARD : Playback.PLAY_REVERSE,
startPosition: checked ? 1.0 : 0.0,

Whenever the checkbox get checked it assures that it plays the animation forward at stops at the end. When it gets unchecked it animates backwards and stops at the beginning.

The property startPosition specifies the initial animation position of the widget. If the checkbox is checked at the beginning we want our initial animation position at the end (1.0 ).

Note: startPosition got introduced with simple_animations 1.1.0

Here’s how the first part of the code looks like:

By binding the checked state to the playback property makes the animation intuitively turn around when the user is interacting while animating:

Users can’t destroy our animation.

Cool, ain’t? Now it’s time to implement the actual checkbox widgets. The second parameter animation is a Map that contains all our tweened properties.

Here is how the code looks like:

Did you have noticed that we didn’t need to write any stateful widgets until here?

Since our SwitchlikeCheckbox is now complete, we can use it somewhere. For my example I wrapped it into a “minimalist form” widget:

This is how it looks like:

Our checkbox beside a label.

You can see the whole example in the Simple Animation Example App:

Also try it out: From now on, the Example App is available in the Play Store to test all examples on your device:

Simple Animations Example App - Apps on Google Play

You can find the simple_animations in pub repositories for Flutter to enrich your app easily with beautiful animation. There you also find a lot of documentation and more articles on how to use it.

Leave some claps if you enjoyed it.

Until next time!
— Felix —

Read follow up article:

Connecting animations with conditions in Flutter