Maquetación: Row, Column, Padding, Expanded, SizedBox

Organiza varios widgets en pantalla usando columnas, filas, espaciado y distribución del espacio.

9 min · 3 preguntas

Una pantalla real rara vez muestra un solo widget: hay que organizarlos. Ese es el trabajo de los widgets de maquetación. Column apila a sus hijos verticalmente, de arriba abajo; Row los alinea horizontalmente, de izquierda a derecha. Como aceptan varios hijos, el parámetro ya no se llama child sino children, y recibe una lista: widgets entre corchetes [ ], separados por comas.

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Flutter Developer"),
    ],
  );
}

Row funciona exactamente igual, pero en horizontal. Su eje principal es el ancho: el parámetro mainAxisAlignment elige cómo distribuir a los hijos a lo largo de ese eje (center para agruparlos en el medio, spaceBetween para separarlos lo máximo posible...). Y para deslizar un simple espacio vacío entre dos widgets, usa SizedBox: una caja invisible cuyo ancho (width) o alto (height) fijas.

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4.8 out of 5"),
    ],
  );
}

Padding añade espacio alrededor de su hijo, para que el contenido no se pegue a los bordes. La cantidad de espacio se describe con EdgeInsets: EdgeInsets.all(16) pone 16 píxeles en los cuatro lados, EdgeInsets.only(left: 8) solo a la izquierda y EdgeInsets.symmetric(horizontal: 12) a la izquierda y a la derecha al mismo tiempo.

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("A text with some room around it"),
  );
}

Una última herramienta: Expanded. Colocado entre los hijos de una Row o de una Column, le pide a su hijo que ocupe todo el espacio restante. En el ejemplo de abajo, la caja gris conserva sus 80 píxeles de ancho, y la caja verde azulada se estira para llenar el resto del ancho, sea cual sea el tamaño de la pantalla.

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿En qué dirección organiza una Column a sus hijos?
   • Horizontalmente, de izquierda a derecha
   • Verticalmente, de arriba abajo
   • En círculo, alrededor del centro de la pantalla
2. ¿Para qué sirve el widget Expanded?
   • Para que su hijo ocupe todo el espacio restante en una Row o una Column
   • Para agrandar la fuente de todos los textos de la pantalla
   • Para hacer zoom en una imagen cuando la tocas
3. ¿Cómo insertas un espacio vacío de 8 píxeles entre dos widgets en una Row?
   • Con un SizedBox(width: 8) colocado entre los dos
   • Pulsando la barra espaciadora ocho veces
   • Con un Expanded(width: 8)