Flutter Animation: What is the difference between explicit and implicit animation?

Discover the difference between explicit and implicit animations in Flutter. Learn how to implement both types of animations to enhance your app’s user experience.

What is the difference b/w Explicit and Implicit animation?

Introduction

Animations play a pivotal role in creating engaging and interactive mobile applications. In Flutter, Google’s powerful UI toolkit, animations can be categorized into two main types: explicit and implicit. Understanding the difference between these animation types is crucial for developers looking to enhance user experience and create dynamic interfaces. In this blog, we will delve into the specifics of explicit and implicit animations, their use cases, and how to implement them in Flutter.

Types of Animations in Flutter

Broadly speaking, there are two types of animations in Flutter:

1. Drawing-based Animations: These animations resemble hand-drawn illustrations and are challenging to implement purely via code.
2. Code-based Animations: These animations are widget-focused and can be easily implemented using code. Code-based animations are the primary focus of this tutorial.

Code-based Animations

Code-based animations are divided into two main types:

1. Implicit Animations: These are pre-programmed animations where you don’t need to write the animation code yourself. Instead, you only need to change some properties or values.
2. Explicit Animations: These involve building customized animations using widgets like AnimatedBuilder. They allow you to customize various properties and animation elements.

What are Implicit Animations?

Implicit animations in Flutter are easy-to-use, high-level animations that automatically transition a widget from one state to another. These animations are ideal for simple, single-property changes and require minimal code. Flutter’s implicit animations handle the interpolation and timing, making them perfect for developers looking to add basic animations without delving into complex details.

Implicit animations can be further divided into two types:

1. AnimatedFoo Widgets: These are built-in implicit animation widgets where “Foo” represents the property you want to animate. For example, AnimatedSize animates the size of a widget. This type of animation is the easiest to implement.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200.0 : 100.0,
  height: _isExpanded ? 200.0 : 100.0,
  color: _isExpanded ? Colors.blue : Colors.red,
  child: FlutterLogo(),
)

In this example, AnimatedContainer smoothly animates changes in width, height, and color.

2. Custom Implicit Animation: When built-in implicit animations don’t meet your needs, you can use TweenAnimationBuilder to create custom implicit animations

TweenAnimationBuilder(
  tween: ColorTween(begin: Colors.red, end: Colors.blue),
  duration: Duration(seconds: 1),
  builder: (context, Color? color, child) {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(color!, BlendMode.modulate),
      child: FlutterLogo(size: 100),
    );
  },
)

Examples of Implicit Animations:

• AnimatedContainer
• AnimatedOpacity
• AnimatedPositioned
• AnimatedAlign

How to Use Implicit Animations

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200.0 : 100.0,
  height: _isExpanded ? 200.0 : 100.0,
  color: _isExpanded ? Colors.blue : Colors.red,
  child: FlutterLogo(),
)

In this example, AnimatedContainer animates changes to its properties like width, height, and color throughout one second.

What are Explicit Animations?

Explicit animations offer more control and flexibility compared to implicit animations. They are used for more complex animations involving multiple properties or custom timing. Explicit animations require developers to define the animation’s behavior, including the animation controller, animation curves, and the transition itself.

Examples of Explicit Animations:

• AnimationController
• Tween
• CurvedAnimation
• AnimatedBuilder

How to Use Explicit Animations

class ExplicitAnimationExample extends StatefulWidget {
  @override
  _ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
}

class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Explicit Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }

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

Key Differences Between Implicit and Explicit Animations

Key Differences Between Implicit and Explicit Animations — Blup

1. Ease of Use:

• Implicit Animations: Simpler to implement, ideal for straightforward animations.
• Explicit Animations: More complex, offering fine-grained control over the animation process.

2. Control and Flexibility:

• Implicit Animations: Limited control, suitable for single-property transitions.
• Explicit Animations: High degree of control, perfect for multi-property and custom animations.

3. Code Complexity:

• Implicit Animations: Require minimal code, making them easier to maintain.
• Explicit Animations: Involve more setup and code, providing detailed control over animations.

Conclusion

Understanding the difference between implicit and explicit animations in Flutter is essential for creating rich, interactive user experiences. Implicit animations offer simplicity and ease of use for basic transitions, while explicit animations provide the control and flexibility needed for complex animations. By leveraging both types of animations, developers can create dynamic and engaging Flutter applications.

Understanding the difference between implicit and explicit animations in Flutter is essential for creating rich, interactive user experiences. Implicit animations offer simplicity and ease of use for basic transitions, while explicit animations provide the control and flexibility needed for complex animations. By leveraging both types of animations, developers can create dynamic and engaging Flutter applications.