Animated Container Widget

Introduction of Animated Container Widget

The Animated Container widget in Flutter is used to create a container with animated properties. It automatically transitions between different property values over a specified duration, resulting in smooth and visually appealing animations.

Below is a brief explanation of the Animated Container widget with key properties:

duration: The duration of the animation, specifying how long the transition from one set of properties to another should take.

AnimatedContainer(
  duration: Duration(seconds: 1),
  // Other properties...
),

curve: The curve of the animation, determining the rate of change during the transition. Common curves include Curves.linear, Curves.easeIn, and Curves.easeInOut.

AnimatedContainer(
  curve: Curves.easeInOut,
  // Other properties...
),

color: The color of the container. This property can be animated to smoothly transition between different colors.

AnimatedContainer(
  color: Colors.blue,
  // Other properties...
),

width, height: The width and height of the container. These properties can be animated to change the size of the container.

AnimatedContainer(
  width: 200,
  height: 200,
  // Other properties...
),

margin, padding: The margin and padding of the container. These properties can be animated to change the spacing around and within the container.

AnimatedContainer(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.symmetric(horizontal: 10),
  // Other properties...
),

transform: The transformation matrix of the container. This property can be animated to apply various transformations, such as rotations or scales.

AnimatedContainer(
  transform: Matrix4.rotationZ(0.5),
  // Other properties...
),

Final Code: This is the final code with some of the above Animated Container widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double boxHeight = 100;
  double boxWidth = 100;
  var boxColor = Colors.deepPurple[700];
  double boxX = -1;
  double boxY = -1;

  // ignore: unused_element
  void _expandBox() {
    setState(() {
      boxHeight = 300;
      boxWidth = 300;
    });
  }

  // ignore: unused_element
  void _changeBoxColor() {
    setState(() {
      boxColor = Colors.pink[700];
      boxHeight = 300;
      boxWidth = 300;
    });
  }

  void _moveBox() {
    setState(() {
      boxX = 1;
      boxY = 1;
      boxColor = Colors.pink[700];
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _moveBox,
      child: Scaffold(
        backgroundColor: Colors.deepPurpleAccent[100],
        body: Center(
          child: AnimatedContainer(
            duration: Duration(milliseconds: 1500),
            alignment: Alignment(boxX, boxY),
            child: Container(
              height: boxHeight,
              width: boxWidth,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: boxColor,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

By utilizing the Animated Container widget and adjusting its properties, developers can easily create fluid and dynamic user interfaces with smooth animations in Flutter applications.

Thank for visiting Hybrid App Development
Posted by Hussam HM