Flutter Animations

Flutter Animations: Hero Animations, Tween Animations, and More

Flutter makes it incredibly easy to create beautiful and smooth animations. Whether you’re enhancing the user experience with subtle transitions or crafting complex motion designs, Flutter’s animation framework offers powerful tools to achieve your vision. In this blog, we’ll explore some of the most commonly used animations in Flutter, including Hero Animations, Tween Animations, and more.

Why Use Animations in Flutter?
Hero Animations
- Creating a Basic Hero Animation
- Customizing Hero Animations
Tween Animations
- Understanding Tween in Flutter
- Tween with AnimationController
- Example of a Tween Animation
Implicit vs. Explicit Animations
- Implicit Animations
- Explicit Animations
More Animation Techniques in Flutter
- Staggered Animations
- AnimatedBuilder
- CurvedAnimation
Best Practices for Animations in Flutter
Conclusion

1. Why Use Animations in Flutter?

Animations in Flutter can significantly improve the user experience by creating a smooth flow between different UI states. Animations help to:

Improve Interactivity: Subtle animations provide feedback to users, making the app feel more responsive.
Guide the User: Animations can guide the user through the app by making transitions between pages or elements more intuitive.
Enhance Aesthetics: Well-executed animations add polish and elegance to your app’s design.

Let’s explore some of the core animations that Flutter developers can use.

2. Hero Animations

Hero animations are one of the most visually impressive types of animations in Flutter. A Hero animation occurs when a widget “flies” from one page to another. This is often used during page transitions to give users a sense of continuity when navigating between screens.

Creating a Basic Hero Animation

Hero animations are defined using the Hero widget. You assign the same tag to both the source widget and the destination widget to create a connection between them.

Here’s an example of a simple Hero animation between two screens:

// First screen with Hero widget
Hero(
  tag: 'hero-tag',
  child: Image.network('https://example.com/image.png'),
);

// Second screen with matching Hero widget
Hero(
  tag: 'hero-tag',
  child: Image.network('https://example.com/image.png'),
);

When the user navigates between these two screens, the image will transition smoothly between them, creating a Hero animation.

Customizing Hero Animations

You can also customize the animation’s flight behavior using the flightShuttleBuilder property, which allows you to define the appearance of the widget during the transition.

Hero(
  tag: 'hero-tag',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    return Icon(Icons.star, size: 100.0); // Custom icon during the animation
  },
  child: Image.network('https://example.com/image.png'),
);

This customisation enables you to control how the widget morphs or changes during the transition.

3. Tween Animations

Tween Animations allow you to animate any property of a widget over time, such as its size, opacity, color, or position. The word “tween” comes from “in-between,” meaning the animation interpolates between a beginning and an end value.

Understanding Tween in Flutter

A Tween defines the range for a property value that will be animated. However, a Tween itself does not handle timing; this is managed by an AnimationController. The Tween just defines how a value changes between the start and end.

Tween with `AnimationController`

To create a tween animation, you first need an AnimationController that defines the duration of the animation, and then you pass it to the Tween to animate the desired property.

class TweenExample extends StatefulWidget {
  @override
  _TweenExampleState createState() => _TweenExampleState();
}

class _TweenExampleState extends State<TweenExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
    
    _controller.forward(); // Start the animation
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return Container(
            width: _animation.value,
            height: _animation.value,
            color: Colors.blue,
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

This code animates a container’s width and height from 0 to 300 over 2 seconds.

4. Implicit vs. Explicit Animations

Flutter provides two types of animations: Implicit and Explicit.

Implicit Animations

Implicit animations are simpler and automatically animate between changes in property values. Flutter has a variety of widgets that offer built-in implicit animations, like AnimatedOpacity, AnimatedContainer, and AnimatedAlign.

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: isExpanded ? 200.0 : 100.0,
  height: isExpanded ? 200.0 : 100.0,
  color: isExpanded ? Colors.red : Colors.blue,
);

In this example, when isExpanded changes, the container smoothly animates between the specified sizes and colors.

Explicit Animations

For more complex animations, explicit animations give you finer control. These animations are built using controllers (AnimationController) and tweens, as discussed in the Tween Animation section.

5. More Animation Techniques in Flutter

Staggered Animations

Staggered animations involve animating multiple properties or widgets in a sequence. This is useful when you want different parts of the UI to animate with some delay between each.

AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<double> animation1 = Tween<double>(begin: 0.0, end: 100.0).animate(CurvedAnimation(parent: controller, curve: Interval(0.0, 0.5)));
Animation<double> animation2 = Tween<double>(begin: 100.0, end: 200.0).animate(CurvedAnimation(parent: controller, curve: Interval(0.5, 1.0)));

Here, animation1 animates in the first half of the total duration, and animation2 animates in the second half.

AnimatedBuilder

AnimatedBuilder is a powerful widget that can be used to reduce code duplication when multiple widgets depend on the same animation. It provides a builder function that is called every time the animation’s value changes.

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Transform.scale(
      scale: _animation.value,
      child: child,
    );
  },
  child: Icon(Icons.star),
);

CurvedAnimation

To create more fluid and natural animations, Flutter provides CurvedAnimation, which allows you to apply easing curves to your animations.

final curve = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);

6. Best Practices for Animations in Flutter

Keep Animations Smooth: Ensure that your animations run at 60fps for the best user experience.
Use Implicit Animations When Possible: They are easier to implement and use fewer resources.
Avoid Overuse: Too many animations can overwhelm users. Use them strategically to improve navigation and user interactions.
Leverage the Power of AnimatedBuilder: This widget helps optimize performance and clean up your code by avoiding unnecessary builds.

7. Conclusion

Animations in Flutter can make your apps not only visually engaging but also more intuitive to use. Whether you’re using Hero animations for page transitions or Tween animations for finer control over your UI elements, Flutter provides a flexible and powerful framework for implementing animations. By understanding and applying these animation techniques, you can create highly polished and professional apps.

Explore Other Flutter Topics…