Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter's animation support makes it easy to implement a variety of animation types. Many widgets, especiallyMaterial widgets, come with the standard motion effects defined in their design spec, but it's also possible to customize these effects.

There are different approaches you can take when creating animations in Flutter. Which approach is right for you? To help you decide, check out the video,How to choose which Flutter Animation Widget is right for you? (Also published as acompanion article.)

Watch on YouTube in a new tab: "How to choose which Flutter animation widget is right for your use case"

(To dive deeper into the decision process, watch theAnimations in Flutter done right video, presented at Flutter Europe.)

As shown in the video, the following decision tree helps you decide what approach to use when implementing a Flutter animation:

For a deeper understanding of just how animations work in Flutter, watchAnimation deep dive. (Also published as acompanion article.)

Watch on YouTube in a new tab: "Take a deep dive into Flutter animation"

If a pre-packaged implicit animation (the easiest animation to implement) suits your needs, watchAnimation basics with implicit animations. (Also published as acompanion article.)

Watch on YouTube in a new tab: "Flutter implicit animation basics"

To create a custom implicit animation, watchCreating your own custom implicit animations with TweenAnimationBuilder. (Also published as acompanion article.)

Watch on YouTube in a new tab: "Create custom implicit animations with TweenAnimationBuilder"

To create an explicit animation (where you control the animation, rather than letting the framework control it), perhaps you can use one of the built-in explicit animations classes. For more information, watchMaking your first directional animations with built-in explicit animations. (Also published as acompanion article.)

Watch on YouTube in a new tab: "Making your first directional animations with built-in explicit animations"

If you need to build an explicit animation from scratch, watchCreating custom explicit animations with AnimatedBuilder and AnimatedWidget. (Also published as acompanion article.)

Watch on YouTube in a new tab: "Creating custom explicit animations with AnimatedBuilder and AnimatedWidget"

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

Short forin-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

• See theAnimations tutorial, which uses tweens in the examples.

• Also see the API documentation forTween,CurveTween, andTweenSequence.

In physics-based animation, motion is modeled to resemble real-world behavior. When you toss a ball, for example, where and when it lands depends on how fast it was tossed and how far it was from the ground. Similarly, dropping a ball attached to a spring falls (and bounces) differently than dropping a ball attached to a string.

• Animate a widget using a physics simulation
  A recipe in the animations section of the Flutter cookbook.

• Also see the API documentation forAnimationController.animateWith andSpringSimulation.

Most UX or motion designers find that certain animation patterns are used repeatedly when designing a UI. This section lists some of the commonly used animation patterns, and tells you where to learn more.

This pattern involves animating the addition or removal of elements from a list or grid.

• AnimatedList example
  This demo, from theSample app catalog, shows how to animate adding an element to a list, or removing a selected element. The internal Dart list is synced as the user modifies the list using the plus (+) and minus (-) buttons.

In this pattern, the user selects an element—often an image—from the page, and the UI animates the selected element to a new page with more detail. In Flutter, you can easily implement shared element transitions between routes (pages) using theHero widget.

• Hero animations How to create two styles of Hero animations:

  • The hero flies from one page to another while changing position and size.
  • The hero's boundary changes shape, from a circle to a square, as its flies from one page to another.

• Also see the API documentation for theHero,Navigator, andPageRoute classes.

Animations that are broken into smaller motions, where some of the motion is delayed. The smaller animations might be sequential, or might partially or completely overlap.

• Staggered Animations

The animation system in Flutter is based on typedAnimation objects. Widgets can either incorporate these animations in their build functions directly by reading their current value and listening to their state changes or they can use the animations as the basis of more elaborate animations that they pass along to other widgets.

In Flutter, anAnimation object knows nothing about what is onscreen. AnAnimation is an abstract class that understands its current value and its state (completed or dismissed). One of the more commonly used animation types isAnimation<double>.

AnAnimation object sequentially generates interpolated numbers between two values over a certain duration. The output of anAnimation object might be linear, a curve, a step function, or any other mapping you can create. Depending on how theAnimation object is controlled, it could run in reverse, or even switch directions in the middle.

Animations can also interpolate types other than double, such asAnimation<Color> orAnimation<Size>.

AnAnimation object has state. Its current value is always available in the.value member.

AnAnimation object knows nothing about rendering orbuild() functions.

ACurvedAnimation defines the animation's progress as a non-linear curve.

animation=CurvedAnimation(parent:controller,curve:Curves.easeIn);

CurvedAnimation andAnimationController (described in the next sections) are both of typeAnimation<double>, so you can pass them interchangeably. TheCurvedAnimation wraps the object it's modifying—you don't subclassAnimationController to implement a curve.

You can useCurves withCurvedAnimation. TheCurves class defines many commonly used curves, or you can create your own. For example:

import'dart:math';​classShakeCurveextendsCurve{@overridedoubletransform(doublet)=>sin(t*pi*2);}

If you want to apply an animation curve to aTween, consider usingCurveTween.

AnimationController is a specialAnimation object that generates a new value whenever the hardware is ready for a new frame. By default, anAnimationController linearly produces the numbers from 0.0 to 1.0 during a given duration. For example, this code creates anAnimation object, but does not start it running:

controller=AnimationController(duration:constDuration(seconds:2),vsync:this,);

AnimationController derives fromAnimation<double>, so it can be used wherever anAnimation object is needed. However, theAnimationController has additional methods to control the animation. For example, you start an animation with the.forward() method. The generation of numbers is tied to the screen refresh, so typically 60 numbers are generated per second. After each number is generated, eachAnimation object calls the attachedListener objects. To create a custom display list for each child, seeRepaintBoundary.

When creating anAnimationController, you pass it avsync argument. The presence ofvsync prevents offscreen animations from consuming unnecessary resources. You can use your stateful object as the vsync by addingSingleTickerProviderStateMixin to the class definition. You can see an example of this inanimate1 on GitHub.

By default, theAnimationController object ranges from 0.0 to 1.0. If you need a different range or a different data type, you can use aTween to configure an animation to interpolate to a different range or data type. For example, the followingTween goes from -200.0 to 0.0:

tween=Tween<double>(begin:-200,end:0);

ATween is a stateless object that takes onlybegin andend. The sole job of aTween is to define a mapping from an input range to an output range. The input range is commonly 0.0 to 1.0, but that's not a requirement.

ATween inherits fromAnimatable<T>, not fromAnimation<T>. AnAnimatable, likeAnimation, doesn't have to output double. For example,ColorTween specifies a progression between two colors.

colorTween=ColorTween(begin:Colors.transparent,end:Colors.black54);

ATween object doesn't store any state. Instead, it provides theevaluate(Animation<double> animation) method that uses thetransform function to map the current value of the animation (between 0.0 and 1.0), to the actual animation value.

The current value of theAnimation object can be found in the.value method. The evaluate function also performs some housekeeping, such as ensuring that begin and end are returned when the animation values are 0.0 and 1.0, respectively.

To use aTween object, callanimate() on theTween, passing in the controller object. For example, the following code generates the integer values from 0 to 255 over the course of 500 ms.

AnimationControllercontroller=AnimationController(duration:constDuration(milliseconds:500),vsync:this,);Animation<int>alpha=IntTween(begin:0,end:255).animate(controller);

The following example shows a controller, a curve, and aTween:

AnimationControllercontroller=AnimationController(duration:constDuration(milliseconds:500),vsync:this,);finalAnimation<double>curve=CurvedAnimation(parent:controller,curve:Curves.easeOut,);Animation<int>alpha=IntTween(begin:0,end:255).animate(curve);

AnAnimation object can haveListeners andStatusListeners, defined withaddListener() andaddStatusListener(). AListener is called whenever the value of the animation changes. The most common behavior of aListener is to callsetState() to cause a rebuild. AStatusListener is called when an animation begins, ends, moves forward, or moves reverse, as defined byAnimationStatus.

The following resources are a good place to start learning the Flutter animation framework. Each of these documents shows how to write animation code.

• Animations in Flutter codelab
  Learn about implicit and explicit animations while building a multiple-choice quiz game.

• Animations tutorial
  Explains the fundamental classes in the Flutter animation package (controllers,Animatable, curves, listeners, builders), as it guides you through a progression of tween animations using different aspects of the animation APIs. This tutorial shows how to create your own custom explicit animations.

• Zero to One with Flutter, part 1 andpart 2
  Medium articles showing how to create an animated chart using tweening.

• Casual games toolkit
  A toolkit with game templates that contain examples of how to use Flutter animations.

Learn more about Flutter animations at the following links:

• There are severalanimations packages available on pub.dev that contain pre-built animations for commonly used patterns, including:Container transforms, shared axis transitions, fade through transitions, and fade transitions.

• Animation samples from theSample app catalog.

• Animation recipes from the Flutter cookbook.

• Animation videos from the Flutter YouTube channel.

• Animations: overview
  A look at some of the major classes in the animations library, and Flutter's animation architecture.

• Animation and motion widgets
  A catalog of some of the animation widgets provided in the Flutter APIs.

• Theanimation library in theFlutter API documentation
  The animation API for the Flutter framework. This link takes you to a technical overview page for the library.