Implicit Flutter Animations

Let’s move over to the meals section of the home page. In here, we have a simple meal switcher that updates the meals list based on the item selected. Currently it doesnt have any animation. Let’s head over to the code to get a brief overview of what it does.

The MealsSwitcher widget is inside the homescreen widget. Hold down ctrl and click on it to navigate to its declaration. In here, we have a _selectItem method that takes an id. It assigns the id to the _currentSelection variable, gets the meals based on the _currentSelection and then calls setState to trigger a widget rebuild.

And if we head over to the build method, we can see that we have a Row containing the different buttons. These buttons are InkWell widgets and inside its onTap callback method, we call the selectItem method we declared above with the corresponding id. So 1 for the first, 2 for the second and 3 for the third button item.

Finally, if we scroll a down a bit, you’ll see the MealsList widget which takes a list of meals to display. And remember the meals variable is updated inside the _setMeals method above.

So this simple setup create the switching effect we have here. In an earlier episode, we used the AnimatedCrossFade but that widget only works for when you want to fade btw two widgets. To switch btw more that two widgets, we would use the AnimatedSwitcher widget. As the name suggests, it switches its child widget whenever the parameters of the child changes. So for our example here, it should switch the MealsList widget with the updated meals.

Let’s go ahead and update our code to use this. Wrap the MealsList with the AnimatedSwitcher like so:

AnimatedSwitcher(
    duration: const Duration(milliseconds: 450),
    child: MealsList(meals: _meals),
),

Save your work. You can see the item switches like before but we dont have any transition and this is not our desired effect. Why is that so?

Well, in Flutter, whenever the parameter of a widget changes, the Flutter framework sees this as the same widget in the widget tree and just updates the widget with the new parameter. That is what is happening in this case. Flutter sees the meals that is passed to this widget changes and decides to update this same widget with the updated parameter.

We need a way uniquely indentify and separate the switching widgets. We need a way to tell Flutter: “Hey! this is a different widget so we need you to distinguish it from the previous one.”

For this, Flutter provides us with keys. Keys are used to identify widgets and elements. Our widgets already have keys assigned to them by default. The Flutter framework uses these keys to know when to add or remove widgets from the tree. They are simply used to refer to a widget, kind of like a variable name for a widget.

In our case, we want to be able to change these keys on demand in order for our transition to take place. We we need to provide our own keys which could change.

Flutter provides us with different types of keys. We have the ValueKey, UniqueKey, ObjectKey. These are known as LocalKeys and they must be unique amongst each other if they have the same parent element.

The other group is the GlobalKey. And as the name suggests, it is a key that is unique across the entire app.

For our AnimatedSwitcher example, we would be using a ValueKey since we just want to assign a key with a different value whenever we switch an item. Okay let’s add that to our code.

Go ahead and assign a key to the MealsList.

child: MealsList(
    key: ValueKey(_currentSelection),
    meals: _meals,
),

A valuekey can accept different data types. In here, we passed in the _currentSelection variable from our state object to uniquely identify the widget whenever we switch an item.

Save your work and try it out. Now the widget transitions properly because Flutter sees it as a different widget because its key changes.

The default transition is a cross-fade. You might want a different effect and for this, the AnimatedSwitcher provides us with the transitionBuilder which lets us customize the transition. Go ahead and paste the following code:

transitionBuilder: (Widget child, Animation<double> animation) {
    return ScaleTransition(child: child, scale: animation);
    //return RotationTransition(child: child, turns: animation); -->
},

The transitionBuilder callback fucntion gives us access to the animation object of the AnimatedSwitcher. With this we can create custom explicti animations for our transition. Explicit animations is beyond the scope of this course but we have use the ScaleTransition widget to scale in and scale out the new and old child respectively. Save your work and try it out. Doesn’t really look cool. Let’ts try out the RotationTransition. This even looks worse. I’ll comment it out so it uses the default FadeTransition.