When can this widget be used

When removing/inserting a widget from the tree.

When switching between widgets.

When values changes

Minimal example

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 represent something invisible or a NULL widget because we can’t just return NULL in the Build method

As you can see, when the FAB is pressed, the widgets fades in and out. This is a really simple example of how AnimatedSwitcher works. For something a bit more complex, let’s try to switch do this but between two widgets with the same type!

If we replace SizedBox with Container , there will be no visible change. This is because Flutter compares widgets widget’s using canUpdate . It checks the runtimeType as well as the key of widgets to determine if there is a change.

What this means is if you need to switch between two widget of the same type, a key must be supplied to the widgets. Keys are used to identify widgets in Flutters widgets hierarchy. We can use any local key but to keep things simple, I will use UniqueKey .

Let’s modify our previous example so that it looks like the snippet below: