Exploring ‘AnimatedSwitcher’ in Flutter

Usman Khan

Jul 11 · 4 min read

Image for post

Image for post

Animation example possible using AnimatedSwitcher

FFlutter SDK provides many inbuilt widgets for animations. Each widget of course is different from the other with each one having their own purpose. Today we are going to have a look at AnimatedSwitcher, a widget which animates the switching off a widget with another provided in its place.

AnimatedSwitcher is very easy to use. It just needs

  • child : The widget which you currently want to be displayed on the screen.
  • duration : The time period over which you want the switching off widgets to take place in an animated way. Basically, the duration over which you want the animation to complete.

Let’s have a look at a basic example where we simply switch between two widgets back and forth on the press of a button.

Explanation

The widget tree is pretty simple. We have our AnimatedSwitcher centered at the center of our screen using Center. The child to display on the screen will be either Text or Container which will depend on the value of the boolean showText. As said earlier, we’ll be switching between the widgets on the press of button, so we have a FloatingActionButton on the press of which we toggle the showText boolean which in turn updates the new child to be rendered on the screen.

Let’s run the code and see the magic :)

Image for post

Image for post

So let’s update the code to toggle between two Container widgets such that the widgets have different values for attributes like height, width, color etc.

Let’s run the code:

Image for post

Image for post

Oops! That doesn’t seem like any appealing lucid transition, does it ?!

The reason being the way Flutter manages the element tree whenever the state is being updated. Whenever a new state is being set, both the runtimeType and the key of the widget is checked.

In order for our animation to work as expected, we need to provide different keys to both the Container widgets so that they are treated as different widgets.

So we are going to provide key using UniqueKey() which makes sure that a unique key is generated which can then be assigned to our widget.

Update the previous code by providing key to both the Container widgets between which we are switching like below:

Container(
...
key : UniqueKey(),
...
)
Image for post

Image for post

The entire code for your reference:

So far from what we’ve seen, you might conclude that AnimatedSwitcher is like AnimatedCrossFade . That is true except that there are more transitions apart from fade that are possible using AnimatedSwitcher.

Scale Transition:

We can change the transition from the conventional fade transition to scale transition by providing transitionBuilder.

Keep the rest of the code the same, just pass ScaleTransition to transitionBuilder in AnimatedSwitcher like below:

transitionBuilder: (widget, animation) => ScaleTransition(
scale: animation,
child: widget,
) ,

Entire code :

Image for post

Image for post

Let’s add some borderRadius to the Container to make it look even better

Updated Code:

Image for post

Image for post

We can also control the nature of animation by providing curves to our AnimatedSwitcher.

There are two curves which we can pass:

  • switchInCurve : This is the curve which the transition will follow for switching in the widget which will replace the current widget on the screen.
  • switchOutCurve : This is the curve which the transition will follow for switching out the widget which is currently present on the screen .

Let’s pass some values to our curves:

switchOutCurve: Curves.easeOutExpo,
switchInCurve: Curves.easeInExpo,
Image for post

Image for post

Entire Code:

Rotate Transition

Just like for ScaleTransition , we’ll need transitionBuilder to which we’ll pass our RotateTransition.

  • Update the code like below:
transitionBuilder: (widget, animation) => RotationTransition(
turns: animation,
child: widget,
) ,
  • Also, we’ll update our curves :
switchOutCurve: Curves.easeInOutCubic,
switchInCurve: Curves.fastLinearToSlowEaseIn,
Image for post

Image for post

Entire Code:

You can further customize the code to try out other transitions, but I’d like to keep the article short and to the point.

Published
Categorized as UX

Leave a comment

Your email address will not be published.