What are implicit animations in Flutter?

Flutter is a powerful UI framework that allows developers to create smooth and engaging user interfaces. Animations are very important for enhancing the user experience, making the app feel more interactive and lively. Flutter provides two types of animations: explicit animations and implicit animations. In this Answer, we will shed some light on the implicit animations in Flutter.

if you want to learn about explicit animations, go here.

Understanding implicit animations

Implicit animations in Flutter are a way to animate widgets without explicitly defining a specific animation controller or animation objects. Instead, Flutter automatically handles the animation for you based on the changes in the values of properties. When the widget's properties change, Flutter will automatically animate the transition between the old and new property values.

Implicit animations are particularly useful when you want to animate a simple property, like changing the size, opacity, or position of a widget in response to user input or some other event. It simplifies the animation process by abstracting away the boilerplate code and providing a cleaner and more concise way of creating animations.

Implicit animation workflow

The typical workflow for implementing an implicit animation in Flutter involves using one of the predefined animated widget classes like the AnimatedContainer, AnimatedOpacity, AnimatedPositioned, etc. These widgets take care of animating specific properties when they change.

The steps to create an implicit animation are as follows:

Define the widget whose properties you want to animate.
Wrap the widget with the appropriate Animated widget that corresponds to the property you wish to animate.
Trigger a change in the property's value, and Flutter will handle the animation automatically.

Code implementation

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() =>
      _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _containerWidth = 100.0;
  double _containerHeight = 100.0;

  void _toggleContainerSize() {
    setState(() {
      _containerWidth = _containerWidth == 100.0 ? 180.0 : 100.0;
      _containerHeight = _containerHeight == 100.0 ? 180.0 : 100.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Implicit Animation Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              duration: Duration(seconds: 1),
              width: _containerWidth,
              height: _containerHeight,
              color: Colors.indigo,
              curve: Curves.easeInOut,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary:Colors.indigo,
                elevation:9,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              onPressed: _toggleContainerSize,
              child: Text('Toggle Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

Using implicit animation in our app

Code explanation

In this code example, we have used the AnimatedContainer widget, which implicitly animates its width, height, and other properties when they change. When the button is pressed, the _toggleContainerSize function is called changing the width and height of the container, which triggers the animation.

Lines 3–7: This code defines a stateful widget called the AnimatedContainerExample. Stateful widgets are used when the widget's state can change during the app's lifetime.
Lines 9–11: The widget also has an associated state class, _AnimatedContainerExampleState, which extends State<AnimatedContainerExample>. This is where we manage the state for this widget. Two variables, the _containerWidth and _containerHeight, are declared to manage the width and height of the animated container.
Lines 13–18: This function _toggleContainerSize() is called when the button is pressed. It is responsible for toggling the size of the container by changing the _containerWidth and _containerHeight. The setState() method is used to notify Flutter that the state has changed and the UI needs to be rebuilt with the updated values.
Lines 20–22: The build method is where the UI for the widget is constructed. It returns a Scaffold widget, which provides a basic structure for the app, including an app bar and a body.
Lines 26–29: Inside the Center widget, we have a Column widget, which stacks its children vertically in a column.
Lines 30–36: The first child of the column is an AnimatedContainer. This is the widget where the implicit animation takes place. We pass the _containerWidth, _containerHeight, and color properties to the AnimatedContainer, and it will automatically animate changes to these properties when they occur.
Lines 38–41: The second child of the Column is an ElevatedButton. This button triggers the _toggleContainerSize() function when pressed, which changes the container's size and triggers the animation.

Free Resources