How to Animate the Properties of a Container in Flutter?

Flutter is one of the newest development platforms introduced back in 2011 for Google developers. However, later on, it was released for global use due to the presence of some of the advanced and intuitive features of the platform. From hot reloading to the built-in SDK, there are many things Flutter has to offer to the dev world.

Flutter allows engineers to prepare a reusable codebase that can easily execute across multiple browsers and devices. In short, Flutter helps the dev team to create cross-platform UI while extending the native features of the concerned operating system.

What is a container in Flutter?

Flutter comes with several widgets. These are nothing but the reusable components to be included in the UI design. They are usually coded with HTML and CSS, which is why most widgets are used for styling and designated purposes. The Container class in Flutter is one of the most used built-in elements in the UI library. It consists of several widgets that define several styling parameters of the user interface.
These are:

• 1. Painting designs and colors
• 2. Size of the widget
• 3. Position of the widget

A typical Container class will have a margin to differentiate it from other containers implemented in the UI codebase. Next to this margin is located the border. It can be re-programmed according to the desired thickness, shape, and color. The border encloses a padding material which is the main point of holding several constraints or well-defined attributes like height and width. In the innermost part is the child component of the container class.

Following is a typical syntax that can be used to define the component class and the widget properties.

Container({Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           Decoration decoration, 
           Decoration foreground decoration, 
           double width, 
           double height, 
           BoxConstraints constraints, 
           EdgeInsetsGeometry margin, 
           Matrix4 transform, 
           Widget child, 
           Clip clipBehavior: Clip.none});

Properties of the Container class in Flutter

Before you learn about automating the properties of the Container class, you must understand what these properties are and what they entail.

• • Child: The child class contains any widget that can be considered the core widget of the Container class. For example, if we want to define the page’s heading with the help of a Container class, then the text widget will be within its child property.
  • Color: As the name suggests, the color property defines what the background color of the Container class will be once the code is deployed in the live environment. Here, you need to determine the styling element of the color property through CSS.
  • Height and width: You can easily understand these properties to define the height and width of the Container class widgets.
  • • • Margin: The margin property defines a blank white space around the Container. You can determine this white space around all four sides or customize it according to the programming requirement. To illustrate the margin for all sides, the operating margin.all() is used.
    • • Padding: This is defined as the space between the child and border properties of the Container class. It is usually expressed in the form of height and width.
    • • Alignment: With the help of this property, the position of the child component in the Container class can be defined, like left, bottom center, top right, and so on.
    • • Decoration: This is the styling element of the child component stored within the Container class. Border and paint are the two major styling elements that can be used with the decoration property, but not at the same time.
    • • Transform: It helps the developers to set a particular for rotating the entire Container along any axis.

  How to animate the Container class properties?

  If you want to animate the properties of the Container class, you need to use the built-in AnimatedContainer widget. It helps animate different class properties and brings more attractiveness to the overall user interface.

  The steps to do so are:

  1. First you need to create the StatefulWidget class. Since you need to customize several properties that will change at different intervals, you need to define each of these properties within the State class.

  2. Now, you have to define the AnimatedContainer Widget. Within the widget’s body, you need to define the same properties you did in the first part. Additionally, you just need to add the duration for which each property will retain its initial value.

  3. In the final step, you need to define any user-based action that will change the property’s state. For example, it can be the color of a clickable button or the size of an image. Since you need to give new values to the property after update, you need to use the function setState().

  Example:

  import 'dart:math';
  import 'package:flutter/material.dart';
  void main() => runApp(const AnimatedContainerApp());
  class AnimatedContainerApp extends StatefulWidget {
    const AnimatedContainerApp({super.key});
    @override
    State createState() => _AnimatedContainerAppState();
  }
  class _AnimatedContainerAppState extends State {
    double _width = 50;
    double _height = 50;
    Color _color = Colors.green;
    BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('AnimatedContainer Demo'),
          ),
          body: Center(
            child: AnimatedContainer(
              // Use the properties stored in the State class.
              width: _width,
              height: _height,
              decoration: BoxDecoration(
                color: _color,
                borderRadius: _borderRadius,
              ),
              duration: const Duration(seconds: 1),
              curve: Curves.fastOutSlowIn,
            ),
          ),
          floatingActionButton: FloatingActionButton(
          onPressed: () {
              setState(() {
                final random = Random();
                _width = random.nextInt(300).toDouble();
                _height = random.nextInt(300).toDouble();
                _color = Color.fromRGBO(
                  random.nextInt(256),
                  random.nextInt(256),
                  random.nextInt(256),
                  1,
                );
                _borderRadius =                  BorderRadius.circular(random.nextInt(100).toDouble());
              });
            },
            child: const Icon(Icons.play_arrow),
          ),
        ),
      );
    }
  }

  Output:

  Conclusion

  In this article, we have shared the details about the built-in Container class of Flutter and the properties usually used in the widget collection. We have also explained the source code for defining animated properties in the Container Class. Moreover, if you are looking to build your robust mobile apps, hire Flutter developer from Flutter Agency who will dedicatedly work on your project.

  Frequently Asked Questions (FAQs)

  1. State the container class in Flutter development
  It is a convenience widget that will merge widgets’ standard painting, positioning, and size. A container class saves one or more widgets and positions them on the screen as per convenience. Usually, a container looks like a box to store the contents.

  2. Define the Stateful widget
  A stateful widget is a widget that will define a part of the user interface by creating a constellation of the other widgets that brief an interface of the user more concretely.

  3. What is the animated container widget in Flutter?
  In the Flutter development, a container is a simple widget that states the properties like width, color, height, etc. This AnimatedContainer widget is a simple container widget with an animation feature. These widgets can be animated by altering the values of their properties which is similar to the container widget.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.