AnimatedSwitcher is one of the least knon widget's in flutter acctuly the first time i heard about this widget was in metaing and simon started talking about it and from that momnt i coulm'd stop using it so in this article i will talk about this widget and show you some cool examples using it.
- when removing/inserting a widget from the tree
- when swiping between widgets
- when values changes
let's start by a very simple example where we will hide/show a widget when the user clicks the FAB
NOTE : always use a SizedBox to reper sentesomthing invisible becuase we can't just return NULL in the Build method
https://gist.github.com/553c8f4ac236db6cfc38415ed33001ed
and as you can see the widget will fade in/out when the FAB is clicked ,Now let's try to do this but between two widget's of the same type! just remplare the SizedBox with another Container and you will see no effect and that's because the flutter framework will comapre betwenn the two widget's using canUpdate
https://gist.github.com/9e4997eba810c3f696d21ada127b17fd
So if you want to switch between two widget withe same type you must give them a Key to identfy them and for that we can use any local key and to make thinks simple i will use a UniqueKey.
Now the example will look somthing like this
https://gist.github.com/f80af748f7330c6edf49bf4bd7521b1a
i know you are sying this is just like AnimatedCrossFade but more compplicated but NO we barley toutched the surface of AniamtedSwitcher
in this example we will switch beteen widget's when thier values changes so a good example would be the countdown example where the Text widget will display the elapsed time and when a new value is omited from the Countdown the AnimatedSwiter will run the transtion Effect:
for this article i will use the CountdownTimer class from quiver.async library and to use to just declare it in the floataing action button pressed event :
https://gist.github.com/fb695d99f8960b24f209e87f12416896
And don't foget to decalre the the elapsed integer in the state of the widget :
https://gist.github.com/fc3ffbf9383dd4e1321c974518662247
Lastly change the chld of the AniamtedSwitcher to this text :
https://gist.github.com/e9a71068d00b94855fc7e07546b1c7bd
Very simple right? but the only think that's new here is the use of ValueKey whcih is another type of local keys which will give your widget a unique id for every value. this is the final result it looks cool but we can make it cooler by making our custom trantion.
the aniamted switcher uses the FadeTransiton by defult
https://gist.github.com/4eba1842aa603d85a70d103720a58028
Using the transitionBuilder prperty we can make our custom transtion so let's do it with the last CountDown example:
https://gist.github.com/1fd7234d610ea34d03b832a2c3c745fd
Now it's your turn to play with it you can use any kind of transitoin or even compose them , but wait a minite what if i want to use a SlideTransiotn and my aniamtion is Animation ? eazy just create a new animation driven by this animation let me show you an example:
https://gist.github.com/a453b2934f2134cbbf147c9b2a309383
one little trick that may make this example even better is clipping so just wrap the SlideTransition with a ClipRect and you will not see two widget's at one time
addional info : You can costimize the in/out curves as well using switchOutCurve and switchInCurve
by defult when the transion is hapening the chidlren are laid out in a Stack but you change that :
https://gist.github.com/e1c458935881db5038656883fe72805f
As you can see the layout here is simple but let's make somethink more advaced like this
the first think to noticed in the above GIF that we have only one widget whcih is is the currunt widget
https://gist.github.com/a9e0a029d2a12d5aa82b6284ee162949
and the second think is the animation as you can see there is a little bit of a delay on e the widget is in the in the View and that's because i used a TweenSequence rather than a simple Tween aniamtion:
https://gist.github.com/cd87a4d3840ae0c66822dbb094659601
NOTE : ConstantTween is A tween with a constant value. and i used it to stop the sequnce for a little bit of time.
And the final pice is the ClipRect and it's used just to show the fixed part in the transtion and without it you will see the full transtion from 1.0 to -1.0
https://gist.github.com/ac833f65576ce554ce8817c11c04c4d5
You can use the ClipRect in the Layoutbuilder but the clipping is expensive and layout is called every time this widget is built and the transionbulder is This is only called when a new child is set
By defult the aniamtedswitcher will just reverse the in aniamtion to get the out aniamtion and that's okay for most cases but it would be cool if we can costimze that as well, unfortinatly this is not somthing provided by the public API and there is an issue for that however for now i will just use this method i found here
https://gist.github.com/4ad48c69ae4d7ec4b0fad95abb09a0f7
and as you can see the idea is all about keys we will comapre the child key with the current ValueKey and decide what to do after that
https://gist.github.com/a5c6c8b970a0d897f365166d4541eb6f
And here is the final result