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. Currently, the following transition patterns are available in this library:
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.
Examples of the container transform:
- A card into a details page
- A list item into a details page
- A FAB into a details page
- 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.
Examples of the shared axis pattern:
- An onboarding flow transitions along the x-axis
- A stepper transitions along the y-axis
- 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.
Examples of the fade through pattern:
- Tapping destinations in a bottom navigation bar
- Tapping a refresh icon
- Tapping an account switcher
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.
Examples of the fade pattern:
- A dialog
- A menu
- A snackbar
- A FAB