El widget Container es un widget que es muy básico pero a la vez muy practico, ya que es un componente genérico de contenimiento, puede contener un componente hijo que puede ser cualquier tipo de widget y lo podemos usar de múltiples maneras dependiendo de la funcionalidad que estemos buscando, por ejemplo:
Lo utilizamos para dar un tamaño.
Lo podemos utilizar para dar espacio entre widgets utilizando márgenes(Margin) o rellenos (Padding).
Lo utilizamos para dar un color de fondo y una forma al widget.
Para mostrar las capacidades del widget Container en la pantalla estaremos usando nuestro código base que creamos en el post “Conoce los principales componentes de tu aplicación”
Lo primero que haremos es poner un contenedor simple que cambie nuestro fondo de pantalla por un color el cual en este caso va a ser verde. Remplazaremos todo dentro de la etiqueta de body: agregando lo siguiente:
Container(
color: Colors.green[100]
)Si mantienes el mouse sobre Colors.green[100] el IDE te mostrara exactamente que color es y la gama de colores disponibles para el verde.
Asignar un tamaño especifico al contenedor: Por default el contenedor va a expandirse hacia el tamaño del contenedor padre en este caso serÃa toda la pantalla, vamos a personalizarlo para que ocupe cierto tamaño en la pantalla.
Container(
color: Colors.green[100],
width: 400,
height: 400
)En este caso nuestro contenedor tendrá las nuevas medidas de 400 × 400 dp
Asignar que se ajuste al tamaño del widget padre: También podemos definir programáticamente que se ajuste a las medidas del contenedor padre y lo podemos hacer utilizando infinity.
Container(
color: Colors.green[100],
width: double.infinity,
height: double.infinity
)Si mantienes el mouse sobre Colors.green[100] el IDE te mostrara exactamente que color es y la gama de colores disponibles para el verde.
Agregar un hijo a nuestro contenedor: Ahora vamos a agregar un widget hijo mediante la propiedad child: a nuestro contenedor para ver cómo se distribuye y ajusta el texto dentro de él.
Container(
color: Colors.green[100],
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
),
)
Agregar margenes al contenedor: Utilizamos la propiedad margin:, de acuerdo a las guias de estilo de iOS y Android es recomendable dejar un margen de alrededor de 16 dp hacia cualquier dirección, entonces lo que vamos hacer ahora es agregarles esos margenes al contenedor.
Container(
color: Colors.green[100],
margin: EdgeInsets.all(16),
child: Text("..."),
)Gracias a esto ahora podemos apreciar que nos hemos asignado a nuestro contenedor verde un margen hacia cada dirección de 16.
Agregar rellenos al contenedor: Usando la propiedad padding: Quien este caso nos generara un espacio entre el contenido del elemento y su borde.
Container(
color: Colors.green[100],
margin: EdgeInsets.all(16),
padding: EdgeInsets.all(16),
child: Text("..."),
)
Podemos modificar la propiedad margin y padding asignado una distancia diferente a cada borde utilizando la siguiente configuración del widget:
EdgeInsets.only(left: 32, right: 32, top: 16, bottom: 16)Éste Widget generará una distancia hacia la izquierda (left) del 32, hacia la derecha (right) de 32, hacia la barra superior (top) de 16 y hacia la barra inferior (bottom) de 16 y puede ser utilizado tanto como en margin como en padding.
Container(
color: Colors.green[100],
margin: EdgeInsets.all(16),
padding:
EdgeInsets.only(
left: 32,
right: 32,
top: 16,
bottom: 16
),
child: Text("..."),
)
Alinear el texto en el contenedor: Comunmente debemos alinear el widget hijo de acorde a ciertos solicitudes, esto podemos hacerlo facilmente utilizando alignment:
Container(
color: Colors.green[100],
margin: EdgeInsets.all(16),
padding: EdgeInsets.all(16),
alignment: Alignment.center,
child: Text("..."),
)
Flutter nos provee de varios tipos de alineamiento por default como son:
- topLeft alinea a la izquierda horizontalmente y arriba verticalmente.
- topCenter alinea al centro horizontalmente y arriba verticalmente.
- topRight alinea a la derecha horizontalmente y arriba verticalmente.
- centerLeft alinea desde la izquierda horizontalmente y al centro verticalmente.
- center alinea al centro horizontalmente y al centro verticalmente.
- centerRight alinea a la derecha horizontalmente y al centro verticalmente.
- bottomLeft alinea a la izquierda horizontalmente y a la parte más baja verticalmente.
- bottomCenter alinea al centro horizontalmente y a la parte más baja verticalmente.
- bottomRight alinea a la derecha horizontalmente y a la parte más baja verticalmente.
Y podemos alinear nuestros widgets con nuestras propias configuraciones de la siguiente manera:
Container(
color: Colors.green[100],
margin: EdgeInsets.all(16),
padding: EdgeInsets.all(16),
alignment: Alignment(0.0, -0.5),
child: Text("..."),
)
Donde Alignment(x,y) funciona de la siguiente manera:
- topLeft Alignment(–1.0, –1.0)
- topCenter Alignment(0.0, –1.0);
- topRight Alignment(1.0, –1.0);
- center Alignment(0.0, 0.0)
- bottomRight Alignment(1.0, 1.0)
Cambiemos la forma de nuestro contenedor podemos cambiar la forma del contenedor utilizando la propiedad decoration la cual nos permite asignar una decoración particular para el contenedor.
Container(
decoration: BoxDecoration(
color: Colors.green[100],
shape: BoxShape.circle
),
margin: EdgeInsets.all(16),
padding: EdgeInsets.all(16),
alignment: Alignment.center,
child: Text("..."),
)
Y asi queda nuestro codigo final:
hello_app/main.dart
Y ahora hemos terminado de explorar el widget Container que utilizaremos a lo largo de este curso junto a algunas variaciones que iremos viendo más adelante.
¿Te está gustando este curso? Aquà hay más temas que otras personas están viendo en este momento.