AnimatedContainer widget and Attributes

The AnimatedContainer widget in Flutter is a container that gradually changes its values over a given duration whenever its properties are updated. It's useful for creating smooth animations for container properties such as size, padding, color, and more.

Attributes:

1. duration (Duration):

   • The duration of the animation. Specifies how long the animation should take to complete when the container's properties change.

2. curve (Curve):

   • The curve to be used for the animation. Curves define the rate of change of an animation over time, such as linear, ease-in, ease-out, etc.

3. alignment (AlignmentGeometry):

   • The alignment of the child within the container. Defaults to Alignment.center.

4. padding (EdgeInsetsGeometry):

   • The padding insets to apply around the child. Padding is animated if specified.

5. color (Color):

   • The color to fill the container with. The color is animated if specified.

6. width (double):

   • The width of the container. Width is animated if specified.

7. height (double):

   • The height of the container. Height is animated if specified.

8. child (Widget):

   • The widget below this widget in the tree. Typically a widget like Text, Image, Icon, etc.

Example:

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer Widget Example'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            width: _isExpanded ? 200.0 : 100.0,
            height: _isExpanded ? 200.0 : 100.0,
            color: _isExpanded ? Colors.blue : Colors.red,
            alignment: _isExpanded ? Alignment.center : Alignment.topCenter,
            child: Text(
              _isExpanded ? 'Expanded' : 'Collapsed',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: AnimatedContainerExample(),
  ));
}

Explanation:

• In this example, an AnimatedContainer widget is used to create a container that smoothly animates its size and color changes.

• The _isExpanded boolean variable is toggled when the container is tapped, causing the container to expand or collapse.

• The duration property is set to Duration(seconds: 1) to specify the duration of the animation as 1 second.

• The curve property is set to Curves.fastOutSlowIn to define the animation curve for smooth transitions.

• The width, height, color, and alignment properties of the container change based on the _isExpanded boolean value, causing the container to animate its size and color smoothly.