Mastering Flutter: Animations Part 1
Tags: flutter, dart, beginners, tutorial
Published: 2021-09-01 15:04:47

If you want to make your Flutter application fancier you're in the right place. With this tutorial in 2 parts you will learn how to add animations to your app.

In this first part we will use the awesome Widgets available in the framework that lets you show awesome animations without having to customize every single aspect of the animations.

The final result will be like the video below:

![The result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtm8oh1i8nyvfllevyzi.gif) 

Let's start creating a `Container` at the center of the screen and the buttons to change its properties.

```javascript
import 'dart:math';
import 'package:flutter/material.dart';

class ImplicitAnimationsScaffold extends StatefulWidget {
  const ImplicitAnimationsScaffold({Key? key}) : super(key: key);

  @override
  _ImplicitAnimationsScaffoldState createState() =>
      _ImplicitAnimationsScaffoldState();
}

class _ImplicitAnimationsScaffoldState
    extends State<ImplicitAnimationsScaffold> {
  double _width = 200;
  double _height = 200;
  double _borderRadius = 20;
  Color _color = Colors.red;

  final _random = Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animations'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Container(
                  width: _width,
                  height: _height,
                  decoration: BoxDecoration(
                    color: _color,
                    borderRadius: BorderRadius.all(
                      Radius.circular(_borderRadius),
                    ),
                  ),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                OutlinedButton(
                  child: Text('Size'),
                  onPressed: () => _changeSize(),
                ),
                OutlinedButton(
                  child: Text('Borer Radius'),
                  onPressed: () => _changeBorderRadius(),
                ),
                OutlinedButton(
                  child: Text('Color'),
                  onPressed: () => _changeColor(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  void _changeSize() { }

  void _changeBorderRadius() { }

  void _changeColor() { }
}
```

 

We've defined 4 properties `_width`, `_height`, `_borderRadius` and `_color`.

Let's implement the functions that change those values:

```javascript
void _changeSize() {
  setState(() {
    _width = 100 + _random.nextInt(100).toDouble();
    _height = 100 + _random.nextInt(100).toDouble();
  });
}

void _changeBorderRadius() {
  setState(() {
    _borderRadius = _borderRadius == 20 ? 0 : 20;
  });
}

void _changeColor() {
  setState(() {
    var rnd = Random();
    var r = rnd.nextInt(16) * 16;
    var g = rnd.nextInt(16) * 16;
    var b = rnd.nextInt(16) * 16;
    _color = Color.fromARGB(255, r, g, b);
  });
}
```

We use the _random object to generate random values for our properties, so when you press the button the Container changes. So, for example, if you press the `Color` button the container will change its color with a random one.
But, wait isn't this tutorial about animations, where are the animations?
To animate the changes to our container we **just** need to use an `AnimatedContainer` instead of a simple `Container` , specifying the duration of the animation.

```javascript
AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  width: _width,
  height: _height,
  decoration: BoxDecoration(
  color: _color,
  borderRadius: BorderRadius.all(
    Radius.circular(_borderRadius),
    ),
  ),
)
```

Now let's add an opacity animation with the `AnimatedOpacity` Widget.
Add a new variable to the state called `_opacity` with the initial value of 1 and the button to change it.

```javascript
double _opacity = 1;

...

OutlinedButton(
  child: Text('Opacity'),
  onPressed: () => _changeOpacity(),
),

...

void _changeOpacity() {
  setState(() {
    _opacity = _opacity == 1 ? 0.5 : 1.0;
  });
}
```

Let's use this value with an `AnimatedOpacity` Widget:

```javascript
AnimatedOpacity(
                  opacity: _opacity,
                  duration: const Duration(milliseconds: 500),
                  child: AnimatedContainer(
...
),
``` 

Congratulations, you've added the first animations to your app, check out the second part of this tutorial to learn how to make more complex and beautiful animations.

Want to check more awesome Flutter tutorials? [Click here!](https://theotherdevs.com/)