Mastering Flutter: Animations Part 1

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:

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

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:

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.

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.

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:

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!

Blog

Mastering Flutter: Animations Part 1

TheOtherDev/s

Join Our Newsletter. No Spam, Only the good stuff.

Related