Un Container es un widget principal que contiene un widget secundario y lo administra, como ancho, alto, fondo, etc.

Antes de comenzar, crearemos un proyecto nuevo, y le daremos la siguiente estructura a MyHomePage:

• Scaffold
  • body
    • Text

El código es el siguiente:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Container',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Widget Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("Hola a todos"),
      ), 
    );
  }
}

El resultado actual de la app es:

Vamos a encerrar el Widget Text dentro de un Container.

De ahora en adelante, vamos a estar trabajando en este widget de tu App.

Container(
        child: Text("Hola a todos"),
      )

A un Container le podemos agregar lo siguiente:

• Padding
• Ancho y Alto (width, height)
• Color de fondo
• Decoracion (forma, background, etc.)
• Alineacion (alignment)
• Transformaciones (transform)

entre otras cosas, ahorita veremos algunas de ellas.

Color

Si agregamos el parámetro color, y por ejemplo lo ponemos «verde» el fondo del widget se pone color verde, ejemplo:

Container(
        color: Colors.green,
        child: Text("Hola a todos"),
      )

Padding

Este parámetro se utiliza para establecer su distancia secundaria desde cuatro direcciones. Podemos ver su definición en el código.

Debemos utilizar un elemento EdgeInsets para establecer el padding.

Container(
        color: Colors.green,
        padding: EdgeInsets.only(top: 10, right: 20, bottom: 30, left: 40),
        child: Text("Hola a todos"),
      )

Margin

Este parámetro agrega espacio fuera del widget en sus 4 direcciones, y al igual que el padding, debemos utilizar un EdgeInsets para establecer estas distancias.

Container(
        color: Colors.green,
        padding: EdgeInsets.only(top: 10, right: 20, bottom: 30, left: 40),
        margin: EdgeInsets.all(25),
        child: Text("Hola a todos"),
      )

Ancho y Alto (width & height)

Como su titulo lo indica, sirve para establecer un alto y un ancho al Container, este parametro recibe valores numéricos double.

Veamos un ejemplo

Container(
        color: Colors.green,
        margin: EdgeInsets.all(25),
        width: 300,
        height: 100,
        child: Text("Hola a todos"),
      )

Para este ejemplo hemos quitado el padding del Container, para que se aprecie mejor el ancho y alto reales, colocamos un ancho de 300 y un alto de 100 unidades, quedando el siguiente resultado:

Alineación (Alignment)

Este parámetro alinea los «hijos» del container, recibe un valor tipo AlignmentGeometry, en nuestro ejemplo alinearemos el hijo «Text» al centro.

Container(
        color: Colors.green,
        alignment: Alignment.center,
        margin: EdgeInsets.all(25),
        width: 300,
        height: 100,
        child: Text("Hola a todos"),
      )

El resultado del código anterior sería el siguiente:

Decoración (decoration)

Este parámetro recibe un objeto Decoration, el  cual sirve para cambiar el aspecto visual, en nuestor ejemplo usaremos un BoxDecoration(), DEBEMOS QUITAR EL PARÁMETRO color QUE TENEMOS ACTUALMENTE AGREGADO, para este ejemplo, pondre el Boxdecoration de color azul, con bordes redondeados y una sombra color negra que este a una distancia de 10 a la derecha y 10 abajo

Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                blurRadius: 10, color: Colors.black, offset: Offset(10, 10))
          ],
        ),
        alignment: Alignment.center,
        margin: EdgeInsets.all(25),
        width: 300,
        height: 100,
        child: Text("Hola a todos"),
      )

Transformación

Este parámetro se utiliza para cambiar la coordenada del contenedor en el widget principal. Debido a que este parámetro se relaciona con las matemáticas, será un poco difícil de entender. Así que solo obtenemos un sencillo para mostrar el efecto, no profundices con esta clase.

Utilizaremos un Matrix4 que nos da varias opciones preprogramadas:

Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                blurRadius: 10, color: Colors.black, offset: Offset(10, 10))
          ],
        ),
        transform: Matrix4.rotationZ(pi / 20),
        alignment: Alignment.center,
        margin: EdgeInsets.all(25),
        width: 300,
        height: 100,
        child: Text("Hola a todos"),
      )

en este ejemplo utilizamos una rotación sobre el eje Z de Math.pi / 20, quedando el siguiente resultado:

Con estos pequeños ejemplo puedes darte a la idea de todo  lo que se puede  hacer con un Container, te invito a indagar más sobre el tema en la pagina oficial de flutter en el siguiente enlace:

https://api.flutter.dev/flutter/widgets/Container-class.html

hasta la próxima, 😀