How to use Staggered Animations in Flutter

Animations play an important role in creating interactive and modern user interfaces. Flutter, a powerful UI toolkit developed by Google, offers a wide array of animation options to bring a sense of life and interactivity to your app. One such technique is Staggered animations, which allow you to manage multiple animations with a time delay between each, creating visually appealing and dynamic effects.

Understanding Staggered animations

Staggered animations involve animating a group of elements with a time delay between each animation. This creates a cascading or waterfall effect where elements animate one after the other, creating a sense of depth and complexity in the user interface of your mobile app.

Staggered animations are commonly used for list items, grid elements, and other scenarios where you want to introduce motion in a non-uniform manner.

Flutter offers several approaches to achieve Staggered animations, including using the StaggeredGrid widget, the AnimatedContainer, and custom animation controllers.

Creating custom Staggered animations

To create custom Staggered animations, we need to understand the key components involved:

Animation controller: An AnimationController is responsible for managing the animation timeline and controlling its playback. It allows you to set the animation's duration, curve, and other parameters.
Animation: An Animation represents the current state of an animation. It holds the intermediate values between the animation's beginning and endpoints.
Tween: A Tween defines how the values between the animation's starting and ending points are interpolated. It maps the animation's value from one range to another.
Curves: Curves determine the pacing of the animation. Flutter provides various pre-defined curves like Curves.easeInOut, Curves.elasticOut, and more.
Delayed animations: We'll introduce delays between different animations to achieve staggered effects. This can be done by starting animations at different points in time.

Implementing custom Staggered animations

Let's go through a step-by-step implementation of a custom staggered animation in Flutter. In this example, we will animate a list of cards with a staggered entrance effect.

Importing necessary packages

Start by creating a new Flutter project and adding the required dependencies to your pubspec.yaml file:

name: flutter_simple_web_app
description: A simple web app with Flutter

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  animated_text_kit: ^3.1.0


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  animated_bottom_navigation_bar: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Using implicit animation in our app

Code explanation

Lines 3–5: We define the main function of our app, which is the entry point of the application. It runs the runApp function, which starts the app by creating an instance of the MyApp widget.
Lines 7–18: Here, we define the MyApp class, which is a stateless widget. The build method returns a MaterialApp widget that sets the app's title, theme, and initial home page as StaggeredAnimationPage.
Lines 20–26: We define the state for StaggeredAnimationPage by creating the _StaggeredAnimationPageState class. We also mix in the SingleTickerProviderStateMixin to enable animation controller usage.
Lines 27–29: The animation controller _controller is defined to control the animations. _circleAnimations is a list of animations for circles, and _horizontalAnimation is an animation for horizontal movement of text.
Lines 32–43: In the initState method, we initialize the animation controller with a duration of 1500 milliseconds (1.5 seconds) and add a status listener to reverse the animation when it completes and forward it when it is dismissed.
Lines 45–55: We create the _circleAnimations, a list of animations for each circle. The generate method creates animations with different start times using the Interval class and the _horizontalAnimation as a tween that moves the text horizontally within the circle.
Lines 65–105: The build method constructs the UI. It displays the staggered circles with the animated "EDUCATIVE" text inside, aligning each letter with the right edge of the circle. The circles and text animations are controlled by _circleAnimations and the _horizontalAnimation, respectively.

Conclusion

Staggered animations in Flutter provide an engaging way to add motion and depth to your user interface. By using custom animation controllers and a combination of Animation objects, Tweens, and curves, you can create stunning Staggered animation effects. Experiment with different curves and time intervals to achieve various visual effects.

Free Resources