Container Widget

Introduction of Container Widget

In Flutter, a container is a fundamental widget used to create a rectangular visual element that can contain other widgets. The Container widget allows developers to customize the appearance of their child widgets by specifying various properties such as dimensions, padding, margin, decoration, and more.

child: The main content of the container, typically another widget.

Container(
  child: Text('Hello, Codestuffer!'),
),

alignment: Specifies how the child should be positioned within the container.

Container(
  alignment: Alignment.center,
  child: Text('Centered Text'),
),

padding: Adds space inside the container. ( symmetric, all & only is a property of EdgeInsets).

Container(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
),

margin: Adds space outside the container. ( symmetric, all & only is a property of EdgeInsets).

Container(
  margin: EdgeInsets.symmetric(vertical: 10.0),
  child: Text('Margined Text'),
),

color: Sets the background color of the container. ( if you don’t you decoration property ).

Container(
  color: Colors.blue,
  child: Text('Colored Container'),
),

width and height: Defines the width and height of the container.

Container(
  width: 200,
  height: 100,
  child: Text('Sized Container'),
),

constraints: Defines additional constraints on the container’s size.

Container(
  constraints: BoxConstraints.expand(width: 200, height: 100),
  child: Text('Constrained Container'),
),

decoration: Allows for more advanced visual customization using a BoxDecoration. This includes features like borders, gradients, shadows, etc.

Container(
  width: 200,
  height: 200,
  alignment: Alignment.center,
  margin: const EdgeInsets.all(20.0),
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10.0),
    border: Border.all(
      color: Colors.black,
      width: 2.0,
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5.0,
        offset: Offset(2.0, 2.0),
      ),
    ],
    gradient: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.blue, Colors.green],
    ),
  ),
  child: const Text(
    'Decorated Container',
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
),

In this example:

1. The Container has a specified width and height.
2. It’s aligned to the center of its parent.
3. It has margins and padding for spacing.
4. The BoxDecoration includes:
   • A blue background color.
   • Rounded corners with a border-radius.
   • A black border.
   • A box shadow for a subtle depth effect.
   • A gradient from blue to green.

transform: Applies a transformation to the container.

Container(
  transform: Matrix4.rotationZ(0.1),
  child: Text('Transformed Container'),
),

foregroundDecoration: Similar to decoration but applied in front of the child.

Container(
  foregroundDecoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Text('Container with Foreground Decoration'),
),

Final Code: This is the final code with the combination of some above container widget properties.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(40),
          alignment: Alignment.center,
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Color.fromARGB(200, 51, 51, 51),
            boxShadow: const [
              BoxShadow(
                color: Color.fromARGB(255, 30, 30, 30),
                offset: Offset(4.0, 4.0),
                blurRadius: 15.0,
                spreadRadius: 0.0,
              ),
              BoxShadow(
                color: Color.fromARGB(255, 74, 74, 74),
                offset: Offset(-4.0, -4.0),
                blurRadius: 15.0,
                spreadRadius: 0.0,
              ),
            ],
          ),
          child: const Text(
            'Hybrid App Development',
            textAlign: TextAlign.center,
            style: TextStyle(height: 1.5),
          ),
        ),
      ),
    );
  }
}

These properties collectively make the Container widget a powerful tool for creating visually appealing and precisely styled layouts in Flutter applications. Developers can use a combination of Container Widget properties to achieve the desired UI effects and layouts.

Thank for visiting Hybrid App Development
Posted by Hussam HM