Flutter Animation tutorial: Animated Containers

I always wanted to work with neat or crazy animations. I have worked with Android for a couple of years and I was starting to lose my love for animations, because trying to develop them in Android was a huge investment of my time.

I am going to cover everything about animation in Flutter from implicit animations to explicit animations and even Flare! This is the first one in the series.

Animated Containers

Animated Containers are implicit animated widgets.

Wait a second. What are implicit animated widgets again?


So usually to achieve an animation in Flutter, we have to define the Animation and AnimationController objects to manage the animations. There are other complex additions like TickerProviderMixin. You have to manually start the animation, end the animation and various other complexities.


But good news for us, implicit animated widgets have all these logic under the hood, and we don’t have to worry about a thing. Give a duration, define the beginningand end values and let your widgets animaaate!

Example 1 — Bar Charts

Imagine you have to build an application with bar graphs. So there can be a container with increasing or decreasing height depending on the graph values.

Let’s imagine the initial height of your Container is 40.0
var height = 40.0;

And then your Container will be like —

Container(
    width: 60.0,
    height: height,
    color: Color(0xff14ff65),
  ),

And now suppose you have a Button and in the onPressed method, you can change the height of the Container and setState() to rebuild the UI.

onPressed: (){
  setState(() {
    height = 320.0;
  });
},

But sadly, we have this following output.

There is no smooth transition when we change the height values. So this looks weird for a bar chart application.

We want the bar to gradually increase with time.

Let’s see if we can achieve our desired effect with AnimatedContainer.

Let’s see some magic!

Replace your ordinary Container with AnimatedContainer and provide a Duration property and see the magic happen!

AnimatedContainer(
  duration: Duration(seconds: 5),
  width: 60.0,
  height: height,
  color: Color(0xff14ff65),
)

One widget replacement and one extra line of code, and voila! You are animating a Container now!

I showed this example during my DevFest BBSR and DevFest Kolkata talks, and in minutes, Flutter was sold to my audience.

Example 2 — Take Flight

Obviously you can animate the usual Container properties like colorheight, and width . But you can also animate a Container’s child, like using the alignment property to align a Container’s child.

Container’s child is an Icon .

Alignment property affects the child of a Container

The initial alignment is Alignment.bottomCenter

On clicking the button, we change the alignment to Alignment.center

And the airplane flies right to the center of the screen!

You can find the entire working code here —

import 'package:flutter/material.dart';

class FlightExample extends StatefulWidget {
  @override
  FlightExampleState createState() {
    return new FlightExampleState();
  }
}

class FlightExampleState extends State<FlightExample> {

  var _alignment = Alignment.bottomCenter;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedContainer(
        padding: EdgeInsets.all(10.0),
        duration: Duration(seconds: 2),
        alignment: _alignment,
        child: Container(
          height: 50.0,
          child: Icon(Icons.airplanemode_active, size: 50.0, color: Colors.blueAccent,),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
        backgroundColor: Colors.blueAccent,
          onPressed: (){
            setState(() {
              _alignment = Alignment.center;
            });
          },
          icon: Icon(Icons.airplanemode_active),
          label: Text("Take Flight")),
    );
  }
}

Example 3 — Playing with lots of colors!

Not one color, but many colors. We are going to animate the gradientproperty of the Container .

Here I defined just two colors and their initial alignment and changed both the properties on setState() .

Code here —

import 'package:flutter/material.dart';

class GradientTransform extends StatefulWidget {
  @override
  GradientTransformState createState() {
    return new GradientTransformState();
  }
}

class GradientTransformState extends State<GradientTransform> {

  var top = FractionalOffset.topCenter;
  var bottom = FractionalOffset.bottomCenter;
  var list = [
    Colors.lightGreen,
    Colors.redAccent,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: AnimatedContainer(
          height: 300.0,
          width: 300.0,
          duration: Duration(seconds: 1),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              gradient: new LinearGradient(
                begin: top,
                end: bottom,
                colors: list,
                stops: [0.0, 1.0],
              ),
              color: Colors.lightGreen
          ),
        ),
      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
          onPressed: (){
            setState(() {
              top = FractionalOffset.bottomLeft;
              bottom = FractionalOffset.topRight;
              list = [
                Colors.blueAccent, Colors.yellowAccent
              ];
            });
          },
          icon: Icon(Icons.update),
          label: Text("Transform")),
    );
  }
}

That’s it.


Leave a Comment