Container Tutorial with Examples – Flutter

Container classes in flutter are convenient ways to combine common painting, positioning, and sizing of widgets.

A container can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to hold its contents. A basic container element that stores a widget has a margin, which separates it from other contents.

The total container can have a border of different shapes, for example, rounded rectangles, etc. A container surrounds its child with padding and then applies additional constraints to the padded extent (including the width and height)

Syntax of Container Class given below

Container({Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           Decoration decoration, 
           Decoration foregroundDecoration, 
           double width, 
           double height, 
           BoxConstraints constraints, 
           EdgeInsetsGeometry margin, 
           Matrix4 transform, 
           Widget child, 
           Clip clipBehavior: Clip.none});

Here’s an example of using the Container class in Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            padding: EdgeInsets.all(16),
            margin: EdgeInsets.all(16),
            alignment: Alignment.center,
            child: Text(
              'Hello, World!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The Container class in Flutter provides a flexible and powerful way to manage the layout and appearance of UI elements.

It allows you to control dimensions, alignment, padding, margin, background color, and more. With its wide range of properties and customization options, the Container class is an essential widget for creating attractive and well-structured Flutter UIs.