Container Widget in Flutter

Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets.

A basic container element that stores a widget has a margin, which separates the present container from other contents.

The total container can be given a border of different shapes, for example, rounded rectangles, etc.

What is the Container Widget?

The Container class in Flutter is a multi-purpose widget that allows you to customize its appearance, dimensions, padding, margin, alignment, decoration, and more. It's like a versatile box that can hold other widgets while providing various styling options.

Key Features and Properties:

1. Alignment: Use the alignment property to control how the child widget is aligned within the container.

2. Padding: Adjust the space inside the container using the padding property, This property takes an EdgeInsets object to define padding values.

3. Margin: Control the space outside the container using the margin property, it also accepts an EdgeInsets object.

4. Decoration: Apply visual decorations such as color, border, shadow, etc., using the decoration property.

5. Constraints: Set constraints on the container's dimensions using properties like width, height, constraints, etc.

6. Transforms: Apply transformations like rotation, scaling, etc., using the transform property. This allows for scaling, rotating, translating, etc.

7. Clip Behavior: Control how the container's child is clipped using the clipBehavior property.

   Example:

    Container(
      alignment: Alignment.center,  // Center aligns the child widget within the container
      padding: EdgeInsets.all(16.0), // Adds padding inside the container
      margin: EdgeInsets.symmetric(vertical: 8.0), // Adds margin around the container
      width: 200,
      height: 100,//Sets explicit width and height for the container
      decoration: BoxDecoration(
        color: Colors.blue, //Background color of the container
        borderRadius: BorderRadius.circular(8.0),  // Adds rounded corners to the container
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3), // Shadow color with opacity
            blurRadius: 4.0, // Amount of blur for the shadow
            offset: Offset(2.0, 2.0), // Offset of the shadow (x, y)
          ),
        ],
      ),
      child: Text(
        'Hello, Container!',
        style: TextStyle(color: Colors.white),
      ),
    )