Implicit Flutter Animations
Notes: 05. Animate a Social Share Button
The student materials have been reviewed and are updated as of August 2022.
The updated material uses null safety and also deploys the use coding practises encouraged by the Flutter as per the Flutter lint rules and a few addons of practises that are considered good here at raywenderlich (see analysis_options.yaml in the material for more info).
Also, since the Flutter 2, it is now necessary to explicitly specify the type that an expression or method can return. If dart is unable to infer the actual type but assumes it return generic type like Object? then it is necessary to casting to actual type as well.
In this section, we are going to apply our knowledge of implicit animations to add animations to the RW-Eats app. We would be covering more implicitly animated widgets.
Open the starter project for this episode. Go ahead and run it in debug mode by hitting the F5 key if you havent done that. It is a simple app that shows different meals you could order. Currently, it doesnt have any custom animations.
Let’s click on a meal item. And scroll down to the share button. This is the first widget we would be animating. It is going to have two states: the open and the closed states. It is currently is its closed state. Let’s take a look at what the open state looks like. Note: there would be no need for you to update your code for this.
...
Container(
//width: 48,
width: 240,
..
Opacity(
//opacity: 0,
opacity: 1,
As you can see, the width of the container increases and the social icons are visible when the share menu is open. Let’s go ahead and animate this. Update your code to the following:
...
bool isOpen = false;
void _toggleShare() {
setState(() {
isOpen = !isOpen;
});
}
...
AnimatedContainer(
duration: const Duration(milliseconds: 350),
curve: Curves.fastOutSlowIn,
width: isOpen ? 240 : 48,
...
Container(
child: IconButton(
icon: const Icon(Icons.share),
onPressed: () => _toggleShare(),
...
AnimatedOpacity(
duration: const Duration(milliseconds: 450),
opacity: isOpen ? 1 : 0,
First, we create a boolean named isOpen to track the open state of the share menu. Then we created a method that toggles this boolean. Inside the build method, we then use this boolean to conditionally change some properties in our widgets. For the animatedcontainer, if the menu is open, we give it a width of 240 else we give it a width of 48. We do something similar for the AnimatedOpacity. Here, we make is visible when the menu is open else we make it invisible.
Finally, we call the _toggleShare() method we created earlier iniside the onPressed callback for the icon button and this triggers the share button state. Save your work.
And let’s try it out. Cool. It works as expected and if you notice, the animations play at different rates. This is achieved by giving the animations different durations and using curves. This technique is used to make the motion more realistic.
Next, we need to animate the share icon to a close icon when the menu is open. For this, i’ll be using the AnimatedCrossFade widget. This widget is used to switch between two widget with a fade transition. Go ahead and update your code to the following:
child: AnimatedCrossFade(
duration: const Duration(milliseconds: 450),
firstChild: IconButton(
icon: const Icon(Icons.share),
onPressed: () => _toggleShare(),
),
secondChild: IconButton(
icon: const Icon(Icons.close),
onPressed: () => _toggleShare(),
),
crossFadeState: !isOpen
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
),
In here, we set the child of the container to an AnimatedCrossFade widget. We assigned the share icon button as the first child and the close icon button as the second child. Next, the crossFadeState determines the child that would be shown. For this, we do a simple condition to show the first child if the menu is not open or the second child if the menu is open. The CrossFadeState is just an enum with two members: showFirst and showSecond. Save your work. And let’s try it out.
Cool! We have a nice looking social share button animation.