[Flutter] Animation

Animation makes applications look more gorgeous.

AnimatedContainer Widget

Flutter provides an AnimatedContainer widget for easy use of animation.

Let's take a look at the full code first.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AnimationApp(),
    );
  }
}

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

  @override
  State<AnimationApp> createState() => _AnimationAppState();
}

class _AnimationAppState extends State<AnimationApp> {
  double _size = 100;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animation Example'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedContainer(
              duration: const Duration(seconds: 2),
              curve: Curves.easeIn,
              color: Colors.amber,
              width: _size,
              height: _size
            ),
            ElevatedButton(
              onPressed: (() {
                setState(() {
                  var random = Random();
                  _size = random.nextDouble() * 300;
                });
              }),
              child: const Text('Animate'),
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
    );
  }
}

This example shows that the box changes to a random size every time you press the animate button.

 

Let's focus on AnimatedContainer widget.

https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

duration property represents the duration of the animation.

curve property represents the animation curve.

color, width, and height properties represent the appearance of the widget.

You can check the behavior of the curve on the page below.

https://api.flutter.dev/flutter/animation/Curves-class.html

AnimatedOpacity Widget

You can apply the animated opacity as well.

double _size = 100;
double _opacity = 1;
  
...  
AnimatedOpacity(
  opacity: _opacity,
  duration: const Duration(seconds: 1),
  child: AnimatedContainer(
    duration: const Duration(seconds: 2),
    curve: Curves.easeIn,
    color: Colors.amber,
    width: _size,
    height: _size
  ),
),
ElevatedButton(...),
ElevatedButton(
  onPressed: () {
    setState(() {
      _opacity == 1 ? _opacity = 0 : _opacity = 1;
    });
  },
  child: const Text('Opacity'),
),
...

It is easy to understand.

You just put the opacity and duration properties.

https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html

AnimatedBuilder Widget

Flutter also provides a widget that allows you to adjust an animation in more detail.

It can accomplish using the AnimatedBuilder widget, it is not simple.

class _AnimationAppState extends State<AnimationApp>
    with SingleTickerProviderStateMixin {
  double _size = 100;
  double _opacity = 1;
  bool _direction = true;
  AnimationController? _animationController;
  Animation? _rotateAnimation;
  Animation? _scaleAnimation;
  Animation? _transAnimation;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
    _rotateAnimation =
        Tween<double>(begin: 0, end: pi * 6).animate(_animationController!);
    _scaleAnimation =
        Tween<double>(begin: 1.5, end: 0.5).animate(_animationController!);
    _transAnimation =
        Tween<Offset>(begin: const Offset(0, 0), end: const Offset(0, 50))
            .animate(_animationController!);
  }
  
  @override
  Widget build(BuildContext context) {
    ...
    AnimatedBuilder(
      animation: _rotateAnimation!,
      builder: (context, widget) {
        return Transform.translate(
          offset: _transAnimation!.value,
          child: Transform.rotate(
            angle: _rotateAnimation!.value,
            child: Transform.scale(
              scale: _scaleAnimation!.value,
              child: Container(
                color: Colors.teal,
                width: 100,
                height: 100,
              ),
            ),
          ),
        );
      },
    ),
    ...
    ElevatedButton(
      onPressed: () {
        if (_direction) {
          _animationController!.forward();
          _direction = !_direction;
        } else {
          _animationController!.reverse();
          _direction = !_direction;
        }
      },
      child: const Text('Animate2'),
    ),
    ...
    
  @override
  void dispose() {
    super.dispose();
    _animationController!.dispose();
  }
}

I think that in this case, the code is the best teacher.

https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html