Flutter, developed by Google, is a powerful framework for building beautiful and engaging user interfaces (UIs) across various platforms. One of its standout features is its robust animation capabilities, allowing developers to create visually stunning and interactive experiences.

AnimationController:

The AnimationController class is a fundamental building block for animations in Flutter. It controls the animation’s duration, playback and manages the animation’s current value. You can define its duration, specify the desired animation curve (e.g., linear, ease-in, ease-out), and listen to animation status changes using listeners.

Tween:

The Tween class defines the range of values an animation should interpolate between. For instance, if you want to animate an object’s opacity from 0.0 to 1.0, you would use a Tween<double>(begin: 0.0, end: 1.0). The animation controller utilizes the tween to generate interpolated values during the animation’s progress.

CurvedAnimation:

CurvedAnimation allows you to apply custom animation curves to modify the rate of change over time. It takes an animation controller and a curve parameter, such as Curves.easeInOut, Curves.fastOutSlowIn, or custom curves created using Cubic class.

AnimationBuilder:

The AnimationBuilder widget provides a way to build complex animations based on the current value of an animation. It allows you to define how UI components should change over time based on the interpolated animation values.

Predefined Animations

FadeTransition:

FadeTransition widget fades its child’s opacity between 0.0 and 1.0 based on the animation’s progress. It’s perfect for creating smooth fade-in or fade-out effects. Here’s an example:

FadeTransition(
  opacity: animation,
  child: YourWidget(),
)

ScaleTransition:

ScaleTransition widget scales its child based on the animation’s value. You can define the starting and ending scale factors. This animation is useful for creating zooming or scaling effects.

ScaleTransition(
scale: animation,
child: YourWidget(),
)

SlideTransition:

SlideTransition animates its child’s position relative to its normal position. You can specify the starting and ending offset values to control the direction and distance of the slide animation.

SlideTransition(
  position: Tween<Offset>(
    begin: Offset(-1.0, 0.0),
    end: Offset(0.0, 0.0),
  ).animate(animation),
  child: YourWidget(),
)

Custom Animations

Hero Animation:

Hero animations create seamless transitions between two UI elements that share a common hero tag. It’s commonly used to animate transitions between screens or when moving an element from one position to another. Here’s a simplified example:

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder:: (context) => ScreenB()),
        );
      },
      child: Hero(
        tag: "imageTag",
        child: Image.asset("image.png"),
      ),
    );
  }
}

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: "imageTag",
            child: Image.asset("image.png"),
          ),
        ),
      ),
    );
  }
}

Staggered Animations:

Staggered animations allow you to animate multiple UI elements with a delay between each animation. It creates a visually appealing sequence of transitions. Here’s an example using the AnimatedOpacity widget:

ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return AnimatedOpacity(
opacity: isVisible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
child: YourItemWidget(),
);
},
)

Transform Animation:

The Transform widget provides various transformations like scaling, rotation, translation, and skewing. By animating the transformation properties, you can achieve dynamic and visually appealing effects. Here’s an example:

Transform.rotate(
  angle: animation.value * 2 * math.pi,
  child: YourWidget(),
)