¿Para qué sirve un Container en Flutter?
Describiéndolo de manera simple, un Container es un espacio rectangular al que le puedes asignar una altura y una anchura. Es un widget básico al que también puedes darle un color y un borde, y en el que puedes colocar otro widget como un ícono, un botón, texto, etc. Los Containers son un widget central en la definición de los diferentes elementos que compondrán tu aplicación.
Aquí te comparto un video de la documentación oficial de Flutter, que te permite comprender de manera ilustrada para qué sirven los Containers.
¿Cómo darle tamaño, color y margen a mi Container?
Los tres parámetros principales que probablemente querrás asignar a tu Container son:
- Un tamaño (altura y anchura);
- Un color;
- Un margen o padding (margen interior).
Asignar un tamaño a un Container
Puedes definir el tamaño de un Container utilizando las propiedades height (altura) y width (anchura). Estas dos propiedades pueden recibir un valor absoluto (en píxeles) o relativo (según el tamaño de la pantalla o de otro elemento). Aquí tienes un ejemplo sencillo de un Container de 50 píxeles por 50 píxeles, ubicado en el centro de su contenedor:
Center(
child: Container(
width: 50,
height: 50,
),
)Asignar un color a un Container
Puedes asignar un color a tu Container añadiéndole la propiedad color (color). Existen tres métodos para definir este valor:
- Colors.xxx: colores básicos de la paleta de Flutter;
- Color.fromARGB(a, r, g, b): los valores deben ser números entre 0 y 255. La letra a representa la opacidad, r el color rojo, g el verde y b el azul;
- Color.fromRGBO(r, g, b, opacity): igual que ARGB, pero la opacidad toma un valor entre 0 y 1.
Aquí tienes un ejemplo de cómo asignar un color a nuestro Container de 50 píxeles:
Center(
child: Container(
width: 50,
height: 50,
color: Colors.greenAccent,
),
)Existen muchas otras maneras de añadir color a un Container, pero aquí te muestro las más simples.
Asignar margen y padding a un Container
El margen te permite crear espacio entre el Container y los elementos que lo rodean. El padding crea espacio entre los bordes del Container y el widget que contiene. Estos dos valores pueden definirse de manera muy sencilla usando alguno de los siguientes métodos:
- EdgeInsets.all(): añade el mismo margen o padding a todos los lados;
- EdgeInsets.symmetric(): añade un margen o padding arriba-abajo o derecha-izquierda;
- EdgeInsets.only(): añade un margen o padding diferente a cada lado.
Al igual que con width y height, estas dos propiedades pueden tomar un valor absoluto (en píxeles) o relativo (a la pantalla o a otro elemento). Aquí tienes un ejemplo sencillo de cómo añadir margen y padding a mi Container:
Center(
child: Container(
width: 50,
height: 50,
color: Colors.greenAccent,
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)En este caso, he añadido un margen de 10 píxeles arriba y abajo de mi Container, y un padding de 5 píxeles en la parte inferior.
¿Cómo añadir un borde a mi Container en Flutter?
Una pregunta frecuente es cómo añadir un borde a un Container en Flutter. Para hacerlo, debes usar la propiedad decoration, a la cual le asignas un widget BoxDecoration. Este widget contiene a su vez la propiedad border, donde puedes especificar un borde utilizando Border.all(), que toma como argumento el grosor del borde y su color. Aquí te muestro cómo se ve el código:
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
color: Colors.greenAccent,
),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)¿Cómo hacer un Container redondeado o circular en Flutter?
Darle una forma redondeada a tu Container no es tan complicado como parece. Para lograrlo, necesitarás nuevamente el widget BoxDecoration, al cual le agregarás la propiedad borderRadius, que recibe como argumento BorderRadius.circular(radius). Aquí, radius debe ser reemplazado por un valor numérico absoluto o relativo. Cuanto mayor sea el valor, más redondeados serán los bordes, hasta que el Container se vuelva completamente circular:
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
borderRadius: BorderRadius.circular(5),
color: Colors.greenAccent,
),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)¿Cómo hacer un Container inclinado?
Por último, tal vez te preguntes cómo cambiar la orientación de un Container. Por ejemplo, ¿cómo hacer que un Container tenga forma de rombo? Simplemente utilizando la propiedad transform, que toma como argumento el método Matrix4.rotationZ(radian). Radian es un valor entre 0 y 1, como en el siguiente ejemplo:
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
color: Colors.greenAccent,
),
transform: Matrix4.rotationZ(0.1),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)Conclusión
Ahora que conoces los widgets Scaffold y Container, estás listo para comenzar a colocar los primeros elementos de tu aplicación. Sin embargo, ¿cómo posicionarlos exactamente donde deseas? Te cuento más en estos dos artículos:
