Flutter Animated Series (Animated Container)
By: Murtaza Sulaihi
Tags: Animation, Coding, Programming, Flutter, Flutter Widget

Hello, friends welcome back to my second story in the Animated Series of Flutter Widget. My first story on Animated Align received a lot of appreciation in terms of reading. Around 2K views and 1K reads within a week and a small celebration for being on the first page of Google’s search. Yay!😁

What is Animated Container?

Well, I am sure you know what a Container widget is, it has basic properties like height, width, background colour, padding, borders, shape and much more, you can read in detail about it in my previous article specifically on the Container widget.

Now, Animated Container involves changing of the above properties mentioned of the Container widget over a duration. You can animate colour, size, border, shape, changing its properties from old to new and animating the change of properties. Animated Container has implicit animations. I know I haven't mentioned about implicit and explicit animations in my last story so I am writing about it below just to understand what it really means and not going into many details.

So there are two types of animation in Flutter.

Explicit animations:- expects an animation controller to animate the widget. Used for more advanced animation which cannot be achieved with implicit animations. Implicit animations:- built-in animation controller to animate the widget.

First, we will look at the constructor and then I will be posting a couple of examples to understand how Animated Container works and where and how it can be used.

AnimatedContainer({

this.alignment,

this.padding,

Color? color,

Decoration? decoration,

this.foregroundDecoration,

double? width,

double? height,

BoxConstraints? constraints,

this.margin,

this.transform,

this.transformAlignment,

this.child,

this.clipBehavior = Clip.none,

Curve curve = Curves.linear,

required Duration duration,

VoidCallback? onEnd,

})

Almost all the properties are the same as the Container widget. You can check my story on The Container widget where you will learn in detail about it. Now there are two extra properties out which one is required that is the duration and curve property both of which cannot be null. Well, the duration and curve property is what makes the whole animation work.

Now, let us look at a couple of examples to get more understand on how to use the animated container.

Example 1:

In the first example, we are going to change the size of the button from a normal state button to a busy state depicting as if some form has been submitted and we are waiting for a confirmation on it. So the size of the button will change and turn into a circular progress bar.

Step 1:

We are going to create a custom button named as AnimatedBusyButton.

/// A button that shows a busy indicator in place of title when pressed

class AnimatedBusyButton extends StatefulWidget {

final bool busy;

final String title;

final Function onPressed;

final bool enabled;

const AnimatedBusyButton(

{@required this.title,

this.busy = false,

@required this.onPressed,

this.enabled = true});



@override

_AnimatedBusyButtonState createState() => _AnimatedBusyButtonState();

}



class _AnimatedBusyButtonState extends State<AnimatedBusyButton> {

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: widget.onPressed,

child: InkWell(

child: AnimatedContainer(

height: widget.busy ? 60 : 75,

width: widget.busy ? 60 : 200,

curve: Curves.easeIn,

duration: const Duration(seconds: 1),

alignment: Alignment.center,

padding: EdgeInsets.symmetric(

horizontal: widget.busy ? 10 : 15,

vertical: widget.busy ? 10 : 10),

decoration: BoxDecoration(

color: widget.enabled ? Colors.blue[800] : Colors.blue[300],

borderRadius: BorderRadius.circular(5),

),

child: !widget.busy

? Text(

widget.title,

style: TextStyle(fontSize: 20, color: Colors.white),

)

: CircularProgressIndicator(

strokeWidth: 3,

valueColor:

AlwaysStoppedAnimation<Color>(Colors.yellowAccent)),

),

),

);

}

}

Step 2:

We are going change the state of the busy property from false to true when the button is pressed and it will animate the button and make it smaller and progress indicator will appear instead of the text. You will have to use a stateful widget .

bool busy = false;



@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Animated Container Widget'),

),

body: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: [

AnimatedBusyButton(

title: 'SAVE',

onPressed: () {

setState(() {

busy = !busy;

});

},

busy: busy,

),

]

),

),

);

As soon as you press on the button it will animate itself to a smaller button based on the duration and curve that has been set. You can try out different types of curve property. There are around 41 different types of curves to choose from.