what is Container in flutter

In Flutter, the Container widget is a versatile and powerful widget used for creating rectangular visual elements. It can contain a single child widget and allows you to apply various styles and properties, such as padding, margins, borders, and background colors. It can also be used for layout purposes by controlling the size and positioning of its child.

Key Properties of Container

• child: The widget that you want to display inside the container.
• padding: Adds padding inside the container.
• margin: Adds space around the outside of the container.
• decoration: Adds decoration like background color, border, and shape.
• width and height: Sets the width and height of the container.
• alignment: Aligns the child within the container.
• constraints: Sets constraints on the container’s size
• transform: Applies a transformation to the container.

Basic Example of Using a Container

Here’s a simple example demonstrating how to use a Container:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Example'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(8.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                offset: Offset(2, 2),
                blurRadius: 4.0,
              ),
            ],
          ),
          child: Text(
            'Hello, Container!',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    );
  }
}

Explanation of the Example

• Container: This is the main container widget.
• padding: Adds padding inside the container (16 pixels on all sides).
• margin: Adds space around the container (16 pixels on all sides).
• decoration: Applies decoration to the container. In this example:
  • color: Sets the background color to blue.
  • borderRadius: Rounds the corners of the container with a radius of 8 pixels.
  • boxShadow: Adds a shadow effect with specific color, offset, and blur radius.
• child: Contains a Text widget with white color and a font size of 20.