Skip to content

[Flutter] Use AnimatedContainer To Deform And Animate Components

Last Updated on 2021-10-12 by Clay

In the process of designing an application, we often need to transform the component to animate it.

A common example is to display an animation like a scroll spreading out when many options are expanded.

Of course, it is possible to directly change the length and width of the component, but it is always better to add a gradual animation.

The article will describe how to use AnimatedContainer to complete the gradual animation of component deformation.

AnimatedContainer is a widget similar to Container, but it will automatically create an animation between old value and the new value when we change the properties of the AnimatedContainer.

How to use AnimatedContainer

We will need to use the following components:

  • StatefulWidget: Every time you change the component properties on the update page
  • AnimatedContainer: A component that will automatically generate gradient animation
  • FloatingActionButton: Buttons to control component deformation

In addition, the changed attribute values of AnimatedContainer are generated in random, and the following various attribute values are changed respectively:

  • height
  • width
  • decoration-borderRadius
  • decoration-color
  • duration

Let's take a sample code.

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


// Main
void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerPage(),
    );
  }
}


class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPage createState() => _AnimatedContainerPage();
}


class _AnimatedContainerPage extends State<AnimatedContainerPage> {
  // Init
  int _duration = 1000;
  double _width = 100.0;
  double _height = 100.0;
  Color _color = Colors.red;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("AnimatedContainer test"),
        ),

        // AnimatedContainer component
        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: Duration(milliseconds: _duration),
            curve: Curves.fastOutSlowIn,
          ),
        ),

        // Button
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.replay_circle_filled),
          backgroundColor: _color,
          onPressed: () {

            // Rebuild the widget
            setState(() {
              _duration = 500 + Random().nextInt(500);
              _width = Random().nextInt(200).toDouble();
              _height = Random().nextInt(200).toDouble();
              _color = Color.fromRGBO(
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextInt(256),
                1,
              );
              _borderRadius = BorderRadius.circular(Random().nextInt(100).toDouble());
            });
          },
        ),
      )
    );
  }
}


Output:

References

Read More

Tags:

Leave a Reply