Adding Animations to Your App

Animations are important: they can significantly improve your app’s user experience by providing a changing user interface. This can range from adding and removing items from a list to fading in elements when you need to draw a user’s attention to them. The Animation API in Flutter is powerful, and in this chapter, you’ll learn how to create effective animations and add them to your projects. This will allow you to create visually pleasing experiences for your users.

In this chapter, we will cover the following recipes:

• Creating basic container animations
• Designing animations part 1 — Using the AnimationController
• Designing animations part 2 — Adding multiple animations
• Designing animations part 3 — Using curves
• Optimizing animations
• Using Hero animations
• Using premade animation transitions
• Using the AnimatedList widget
• Implementing swiping with the...

Creating basic container animations

In this recipe, you will place a square in the middle of the screen. When you click the IconButton in the AppBar, three animations will take place at the same time. The square will change color, size, and its top margin:

Figure 12.1: Example of AnimatedContainer

After following this recipe, you will understand how to work with the AnimatedContainer widget, one of the implicit animations, which allows the creation of simple animations with a Container.

Getting ready

In order to follow this recipe, create a new Flutter app, and call it my_animations.

How to do it...

In the following steps, you will create a new screen that shows an animation with an AnimatedContainer widget:

1. Remove the MyHomePage class created in the sample app.
2. Refactor the MyApp class as shown here:

   import 'package:flutter/material.dart';
   void main() {
     runApp(const MyApp());
   }
   class MyApp extends StatelessWidget...

Designing animations part 1 — Using the AnimationController

In this recipe, you will perform the first step of making your widgets animatable, by conforming to a ticker Mixin and initializing an AnimationController. You will also add the appropriate listeners to make sure the build function reruns at every tick.

You will build an animation that moves a ball diagonally starting from the top of the screen, then stopping at an ending position as shown in Figure 12.2:

Figure 12.2: Example of AnimationController

Getting ready

To follow along with this recipe, you can create a new Flutter project, or you can use the app created in the previous recipe, Creating basic container animations.

How to do it...

In this recipe, you will build a widget that moves across the screen:

1. In the lib folder, create a new file called shape_animation.dart.
2. At the top of the file, import material.dart:

   import 'package:flutter/material.dart&apos...

Designing animations part 2 — Adding multiple animations

We will now wire up a series of tweens that describe what values the animation is supposed to change and then link the tweens to the AnimationController. This will allow us to move the ball on the screen at different speeds.

In this recipe, you will learn how to perform several animations with the same AnimationController, which will give you the flexibility to perform more interesting custom animations in your app.

Getting ready

To follow along in this recipe, you need the app built in the previous recipe, Designing animations part 1 — VSync and the AnimationController.

How to do it…

In the next few steps, you will see how to perform two Tween animations at the same time using a single AnimationController:

1. At the top of the _ShapeAnimationState class, remove the pos double, and add two new values, one for the top position and one for the left position of the ball. Also,...

Designing animations part 3 — Using curves

Linear movement exists only in theoretical physics. Why not make the movement a bit more realistic with ease-in and ease-out curves?

In general, CurvedAnimations provide a more realistic and visually appealing movement, and a variety of pre-built curves to choose from, like ease-in, ease-out, and bounce.

In this recipe, you will add a curve to the animation you built in parts 1 and 2 of Designing animations, so that the ball will start moving slowly, then increase its speed, and then slow down again before stopping.

By the end of this recipe, you will understand how to add curves to your animations, making them more realistic and appealing.

Getting ready

To follow along with this recipe, you need the app built in the previous two recipes: Designing animations part 1 — VSync and the AnimationController and Designing animations part 2 — Adding multiple animations.

How to do it...

In this recipe...

Optimizing animations

In this recipe, you will use AnimatedBuilder widgets, which simplify the process of writing animations and provide some important performance optimizations.

In particular, you will design a “yo-yo-like” animation. By using an AnimatedBuilder, your animations will only need to redraw the descendants of the widget. In this way, you will both optimize the animations and simplify the process of designing them.

Getting ready

To follow along with this recipe, you need the app built in the previous three recipes: Designing animations part 1 — VSync and the AnimationController, Designing animations part 2 — Adding multiple animations, and Designing animations part 3 — Using curves.

How to do it...

You will now add an AnimatedBuilder widget to your app to optimize the movement of the ball on the screen:

1. In the build method of the _ShapeAnimationState class, remove the actions parameter from the AppBar.
...

Using Hero animations

In Flutter, a Hero is an animation that makes a widget “fly” from one screen to another. During the flight, the Hero may change position, size, and shape. The Flutter framework deals with the transition automatically.

In this recipe, you will see how to implement a Hero transition in your apps, from an icon in a ListTile to a bigger icon on a detail screen, as shown in the following screenshots. The first screen contains a List:

Figure 12.4: A List in a Hero animation

When the user clicks on one of the items in the List, the second screen appears with an animation:

Figure 12.5: Detail screen after the Hero animation

Getting ready

To follow along with this recipe, you need any existing Flutter project already created, or you can use the app created in any of the previous recipes.

How to do it...

In this recipe, you will create a Hero animation by transforming an icon, and changing its position and size...

Using premade animation transitions

You can use transition widgets to create animations in an easier way than using traditional animations. The Flutter framework contains several pre-made transitions, which makes animating objects extremely straightforward. These include:

• DecoratedBoxTransition
• FadeTransition
• PositionedTransition
• RotationTransition
• ScaleTransition
• SizeTransition
• SlideTransition

In this recipe, you will use the FadeTransition widget, but the same animation rules that you will see for FadeTransition apply to the other transitions in the Flutter framework.

In particular, you will make a square appear slowly on the screen, over a specified duration of time:

Figure 12.6: A square appearing with FadeTransition

Getting ready

To follow along with this recipe, you need any existing Flutter project already created, or you can use the app created in any of the previous recipes.

How to do it...

...

Using the AnimatedList widget

ListView widgets are arguably one of the most important widgets for showing lists of data in Flutter. When using a ListView, its contents can be added, removed, or changed. A problem that may happen is that users may miss the changes in the list. That’s when another widget comes to help. It’s the AnimatedList widget. It works just like a ListView, but when you add or remove an item in the list, you can show an animation so that you help the user be aware of the change.

In this recipe, you will make items appear and disappear slowly in an animated list:

Figure 12.7: An AnimatedList example

Getting ready

To follow along with this recipe, you need to create a new Flutter project, or you can use the app created in any of the previous recipes.

How to do it...

In this recipe, we will use a FadeTransition into an AnimatedList:

1. Create a new file in the lib folder called animated_list.dart.
2. At the top...

Implementing swiping with the Dismissible widget

Mobile users expect apps to respond to gestures. In particular, swiping an item left or right in a ListView can be used to delete an item from a List.

There’s a very useful widget in Flutter designed to remove an item in response to a swiping gesture from the user. It’s called Dismissible. In this recipe, you will see a simple example that shows how to implement a Dismissible widget in your apps.

Getting ready

To follow along with this recipe, create a new Flutter project, or use the app created in any of the previous recipes.

How to do it...

You will now create a screen with a ListView, and include a Dismissible widget in it:

1. Create a new file in the lib folder called dismissible.dart.
2. At the top of the file, import material.dart:

   import 'package:flutter/material.dart';
   

3. Create a stateful widget, calling it DismissibleScreen:

   class DismissibleScreen...

Using the animations Flutter package

The animations package, developed by the Flutter team, allows you to design animations based on the Material Design motion specifications. The package contains pre-made animations, which you can customize with your own content: the result is that with very few lines of code, you will be able to add complex and compelling effects to your apps, including the Container Transform, which you will implement in this recipe.

Specifically, in this recipe, you will transform a ListTile into a full screen, as shown in the following screenshot:

Figure 12.8: An animations package example

Getting ready

To follow along with this recipe, you should have completed the code in the previous recipe: Implementing swiping with the Dismissible widget.

How to do it...

In this recipe, you will use the animations Container Transform:

1. In your Terminal, add the animations dependency to your project by typing the following command:...

Summary

In this chapter, you began exploring the world of animations in Flutter. You started by using the AnimatedContainer widget, allowing you to create smooth transitions between different properties of a container, like its size, color, or position. This has been an introduction to implicit animations, as the AnimatedContainer handles the animation process automatically.

You also designed your own custom animations using the AnimationController. This gives you greater control over animations, allowing you to create more complex visuals. You also saw how to add multiple animations using the same AnimationController.

You learned how to incorporate curves into your animations, which creates more realistic and natural-looking animations. You also saw how to optimize your animations, ensuring they run efficiently without consuming unnecessary resources, which is essential for delivering a high-performance app.

Hero animations create a seamless transition between UI elements...