
La clase container en flutter es un widget de conveniencia que combina la pintura, el posicionamiento y el tamaño comunes de los widgets. Una clase de contenedor se puede utilizar para almacenar uno o más widgets y colocarlos en la pantalla según nuestra conveniencia. Básicamente, un container es como una caja para almacenar contenido.
Tabla de contenidos
Un elemento contenedor básico que almacena un widget tiene un margen(margin) que separa el contenedor actual con otros contenidos. El contenedor total puede tener un borde(border) de diferentes formas, por ejemplo, rectángulos redondeados, etc. Un contenedor rodea a su hijo(child) con relleno(padding) y luego aplica restricciones adicionales a la extensión acolchada (incorporando el ancho y la altura como restricciones, si alguna no es nulo).

Sintaxis del constructor Container Class:
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});
Propiedades de la clase de contenedor
Child
El widget de contenedor tiene una propiedad ‘child:’ que almacena sus hijos. La clase secundaria puede ser cualquier widget. Tomemos un ejemplo, tomando un widget de texto cuando era child.
import 'package:flutter/material.dart'; void main() = > runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold(appBar : AppBar(title : Text("Ejemplo del Container"), ), body : Container(child : Text("Hola estoy dentro del container", style : TextStyle(fontSize : 20)), ), ), ); }}

Color
Esta propiedad color establece el color de fondo de todo el contenedor. Ahora podemos visualizar la posición del contenedor usando un color de fondo.
import 'package:flutter/material.dart'; void main() = > runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold(appBar : AppBar(title : Text("Ejemplo del Container color rojo"), ), body : Container(color : Colors.red, child : Text("Hola estoy dentro del container y soy de color rojo", style : TextStyle(fontSize : 20)), ),),);}}

Height and width
La clase de contenedor ocupa el espacio predeterminado que necesita el Child. También podemos especificar la altura y el ancho del contenedor según nuestros requisitos.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container height y width"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, color: Colors.redAccent, child: const Text("Uso de height y width", style: TextStyle(fontSize: 35)), ),),);}}

Margin
El margin se utiliza para crear un espacio vacío alrededor del contenedor. Observe el espacio en blanco alrededor del recipiente. Aquí se utiliza EdgeInsets.geometry para establecer todo el margen. Todos indica que el margen está presente en las cuatro direcciones por igual.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container con margen"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, color: Colors.redAccent, margin: const EdgeInsets.all(25), child: const Text("Uso del Margen", style: TextStyle(fontSize: 35)), ),),);}}

Padding
El padding se utiliza para dar espacio al borde del contenedor de sus children. Observe el espacio entre el borde y el texto.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container con padding"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, color: Colors.redAccent, margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(40), child: const Text("Uso del Padding", style: TextStyle(fontSize: 35)), ),),);}}

Alignment
La alineación se utiliza para colocar al niño dentro del contenedor. Podemos alinear de diferentes formas: abajo, abajo en el centro, izquierda, derecha, etc. en el ejemplo de child está alineado en el centro parte inferior.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container con alignment"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, alignment: Alignment.bottomCenter, color: Colors.redAccent, margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(40), child: const Text("Uso de Alignment", style: TextStyle(fontSize: 30)), ),),);}}

Decoration
La propiedad de decoración se utiliza para decorar la caja (por ejemplo, dar un borde). Esto pinta detrás del niño. Mientras que foregroundDecoration pinta frente a un child. Démosle un borde al contenedor. Pero no se pueden dar tanto el color como el color del borde.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container con decoration"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, alignment: Alignment.bottomCenter, //color: Colors.redAccent, margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(40), decoration: BoxDecoration(border: Border.all(color: Colors.blue, width: 4)), child: const Text("Uso de Decoration", style: TextStyle(fontSize: 30)), ),),);}}

Transform
Esta propiedad del contenedor nos ayuda a rotar el contenedor. Podemos rotar el contenedor en cualquier eje, aquí estamos rotando en el eje z.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // ignore: use_key_in_widget_constructors class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( home: Scaffold(appBar: AppBar(title: const Text("Ejemplo del Container con transform"), titleTextStyle: const TextStyle(fontSize: 20), ), body: Container( height: 250, width: double.infinity, alignment: Alignment.bottomCenter, color: Colors.redAccent, margin: const EdgeInsets.all(25), padding: const EdgeInsets.all(40), transform: Matrix4.rotationZ(0.2), child: const Text("Uso de Transform", style: TextStyle(fontSize: 30)), ),),);}}

Constraints
Cuando queremos dar restricciones adicionales al niño, podemos usar esta propiedad.
ClipBehaviour
Esta propiedad toma Clip enum como objeto. Esto decide si el contenido dentro del contenedor se recortará o no.
ForegroundDecoration
Este parámetro contiene la clase Decoración como objeto. Controla la decoración frente al widget Contenedor.
Fuente de Recursos
- Fuente del artículo, página GeeksforGeeks Container class in Flutter
- Página official flutter documentation.
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python
- Expresión var en JavaScript
- Expresión try…catch en JavaScript
- Expresión throw en JavaScript
- Continue en JavaScript
- Switch en JavaScript
- Expresiones if…else en JavaScript
- Declaración vacía o empty en JavaScript
- Break en JavaScript
- Sentencia block en JavaScript
- Arguments en JavaScript
- Promise en JavaScript
- Number en JavaScript
- Características JSON en JavaScript
- Array en JavaScript