Clase Container en Flutter

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.

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)),
        ),),);}}

Propiedades de clase container height y width

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)),
        ),),);}}

Propiedades de clase container alignment — t

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)),
        ),),);}}

Propiedades de clase container decoration

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)),
        ),),);}}

Propiedades de clase container transform

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.