Flutter 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.
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
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 :)
So let’s update the code to toggle between two
Container widgets such that the widgets have different values for attributes like
Let’s run the code:
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:
key : UniqueKey(),
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
We can change the transition from the conventional fade transition to scale transition by providing
Keep the rest of the code the same, just pass
AnimatedSwitcher like below:
transitionBuilder: (widget, animation) => ScaleTransition(
Entire code :
Let’s add some
borderRadius to the
Container to make it look even better
We can also control the nature of animation by providing curves to our
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:
Just like for
ScaleTransition , we’ll need
transitionBuilder to which we’ll pass our
- Update the code like below:
transitionBuilder: (widget, animation) => RotationTransition(
- Also, we’ll update our curves :
You can further customize the code to try out other transitions, but I’d like to keep the article short and to the point.