Enrich Your Flutter Apps with Pre-Built Animations

Elevate the user experience of your Flutter applications with a library of pre-canned animations designed specifically for common effects. These high-quality animations allow you to effortlessly add delightful transitions to your app with minimal effort.

Material Motion for Flutter

Material motion defines a set of transition patterns that guide users through your app, enhancing comprehension and navigation. Choose from the following patterns to create seamless transitions:

Container Transform: Connects two UI elements with a container-based transition, ideal for navigating between cards, list items, and more.

ContainerTransformAnimation(
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.red,
  ),
  onTransform: (transform, _) {
    return transform.scale(1.5);
  },
  onEnd: () {
    // Do something after the animation ends
  },
);

Shared Axis: Emphasizes the relationship between UI elements through a shared transformation on the x, y, or z axis, suitable for onboarding flows, steppers, and parent-child navigation.

SharedAxisAnimation(
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.blue,
  ),
  axis: Axis.horizontal,
  onAnimationStart: () {
    // Do something when the animation starts
  },
);

Fade Through: Transitions between UI elements without a strong relationship, such as bottom navigation bar taps, refresh icons, and account switchers.

FadeThroughAnimation(
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
  duration: Duration(milliseconds: 500),
  onAnimationEnd: () {
    // Do something when the animation ends
  },
);

Fade: Handles UI elements entering or exiting within the screen bounds, such as dialogs, menus, and FABs.

FadeAnimation(
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.yellow,
  ),
  onAnimationStart: () {
    // Do something when the animation starts
  },
  onAnimationEnd: () {
    // Do something when the animation ends
  },
);

Usage

1. Add the package to your pubspec.yaml file:

dependencies:
  animations: ^1.1.2

1. Import the package:

import 'package:animations/animations.dart';

1. Create an Animation: Choose from the available animation types and customize it with your content.
2. Run the app: Execute flutter run to preview the animations.

Conclusion

Incorporate these pre-built animations into your Flutter apps to enhance user engagement and simplify the development process. With Material motion as a guide, you can create intuitive and delightful transitions that elevate the overall user experience.