Flutter Animation Series Part 2 - Implicit Animations

Welcome to Animation Series Part 2, where we’ll dive into Implicit Animations in Flutter! Building on the foundational concepts from Part 1, this section focuses on the simpler, more intuitive approach to animations that Flutter provides.

Introduction

Welcome to Animation Series Part 2, where we’ll dive into Implicit Animations in Flutter! Building on the foundational concepts from Part 1, this section focuses on the simpler, more intuitive approach to animations that Flutter provides.

By the end of this part, you’ll have a solid understanding of how to leverage implicit animations to enhance your Flutter apps. Let’s get started!

Implicit Animations

This is the most basic and simplest approach to animate any element. It involves;

Identifying a widget and its corresponding animated widget. Some examples include:
- Container - AnimatedContainer
- Opacity - AnimatedOpacity
- Positioned - AnimatedPositioned, etc
Modifying a property of the animated widget. Typically, the duration parameter is required, which specifies how long the animation will take to complete.
Set a variable that will be used to rebuild the widget, which in turn triggers the animation. The rebuild can be easily triggered by using setState
Create a tenary condition for the property of the widget you want to update, it could be color, opacity, offset,etc
Finally, add a button that will update the variable. When setState is called, the widget will rebuild, and the animation will be triggered.

Demo #1

I want to update the color of a Box from red to blue;

Here are my steps

Step 1 : Identify the widget I could use, in my case I will use a Container widget. Its corresponding animated widget is AnimatedContainer. Don't forget the duration parameter.

demo_1.dart

AnimatedContainer(
  height: 300,
  width: 200,
  duration:const Duration(milliseconds:500)
)

Step 2: Find the property I want to modify which is the color property

demo_1.dart

AnimatedContainer(
  height: 300,
  width: 200,
  color: Colors.red,
  duration:const Duration(milliseconds:500)
)

Step 3: Create a variable to change the color

demo_1.dart


class Demo1 extends StatefulWidget {
  const Demo1({super.key});

  @override
  State<Demo1> createState() => _Demo1State();
}

class _Demo1State extends State<Demo1> {

  //This variable will be used to change the 
  bool isRed = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AnimatedContainer(
            duration:const Duration(milliseconds:500)
            height: 300,
            width: 200,
            color: Colors.red,
            duration:const Duration(milliseconds:500)
          ),
        ],
      ),
    );
  }
}

Step 4: Set a tenary operator to toggle the state

demo_1.dart


class Demo1 extends StatefulWidget {
  const Demo1({super.key});

  @override
  State<Demo1> createState() => _Demo1State();
}

class _Demo1State extends State<Demo1> {

  //This variable will be used to change the 
  bool isRed = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AnimatedContainer(
            height: 300,
            width: 200,
            color:isRed ? Colors.red:Colors.blue,
            duration:const Duration(milliseconds:500)
          ),
        ],
      ),
    );
  }
}

Step 5: Add a toggle button to animate your widget manually


class Demo1 extends StatefulWidget {
  const Demo1({super.key});

  @override
  State<Demo1> createState() => _Demo1State();
}

class _Demo1State extends State<Demo1> {

  //This variable will be used to change the 
  bool isRed = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AnimatedContainer(
            height: 300,
            width: 200,
            color:isRed ? Colors.red:Colors.blue,
            duration:const Duration(milliseconds:500)
          ),
        
          SizedBox(height:20),
        
          ElevatedButton(
            onPressed: () {
              setState(() => isRed = !isRed);
            },
            child: const Text("Animate"),
          ),
        ],
      ),
    );
  }
}

Some Tips:

To animate a button from blue to red when the screen appears, start by setting the button's initial color to blue. Then, use the initState method to trigger the color change.
In Flutter, the build method is called whenever setState is invoked. For more precise control over state changes, consider using state management libraries.
Remember, the goal of animation is to enhance the user experience with smooth transitions. Keep your animations simple yet engaging.

Flutter Animation Series Part 2 - Implicit Animations

Introduction

Implicit Animations

Demo #1

Some Tips:

Resources

Comments

Support