animations 2.0.11 copy "animations: ^2.0.11" to clipboard
animations: ^2.0.11 copied to clipboard

Fancy pre-built animations that can easily be integrated into any Flutter application.

High quality pre-built Animations for Flutter #

This package contains pre-canned animations for commonly-desired effects. The animations can be customized with your content and dropped into your application to delight your users.

To see examples of the following animations on a device or simulator:

cd example/
flutter run --release

Material motion for Flutter #

Material motion is a set of transition patterns that help users understand and navigate an app. For more information on the patterns and how to choose between them, check out the Material motion system spec.

A codelab, Building Beautiful Transitions with Material Motion for Flutter, is also available.

Material motion defines the following transition patterns:

  1. Container transform
  2. Shared axis
  3. Fade through
  4. Fade

Container transform #

The container transform pattern is designed for transitions between UI elements that include a container. This pattern creates a visible connection between two UI elements.

"Container transform gallery - normal speed and slow motion" Examples of the container transform:

  1. A card into a details page
  2. A list item into a details page
  3. A FAB into a details page
  4. A search bar into expanded search

Shared axis #

The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.

"Shared axis gallery - normal speed and slow motion" Examples of the shared axis pattern:

  1. An onboarding flow transitions along the x-axis
  2. A stepper transitions along the y-axis
  3. A parent-child navigation transitions along the z-axis

Fade through #

The fade through pattern is used for transitions between UI elements that do not have a strong relationship to each other.

"Fade through gallery - normal speed and slow motion" Examples of the fade through pattern:

  1. Tapping destinations in a bottom navigation bar
  2. Tapping a refresh icon
  3. Tapping an account switcher

Fade #

The fade pattern is used for UI elements that enter or exit within the bounds of the screen, such as a dialog that fades in the center of the screen.

"Fade gallery - normal speed and slow motion" Examples of the fade pattern:

  1. A dialog
  2. A menu
  3. A snackbar
  4. A FAB
5673
likes
140
pub points
99%
popularity
screenshot

Publisher

verified publisherflutter.dev

Fancy pre-built animations that can easily be integrated into any Flutter application.

Repository (GitHub)
View/report issues
Contributing

Topics

#animation #ui

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on animations