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.
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 :)
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:
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(),
...
)
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 :
Let’s add some borderRadius to the Container to make it look even better
Updated Code:
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,
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,
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.