# Algoritmo de Layout en Flutter
"Constraints go down. Sizes go up. Parent sets position."
(Las restricciones bajan. Los tamaños suben. El padre decide la posición).
Esta es la regla de oro del layout en Flutter.
## El Protocolo de Layout
El proceso ocurre en una sola pasada (O(n)) para ser extremadamente rápido:
1. **Padre:** Pasa **Constraints** (restricciones) al hijo.
- "Debes medir entre minWidth y maxWidth, y entre minHeight y maxHeight".
2. **Hijo:** Calcula su propio tamaño basándose en esas restricciones y su contenido.
- "Ok, quiero medir 100x100".
3. **Hijo:** Pasa su **Size** (tamaño) final al padre.
4. **Padre:** Decide la **Position** (posición) del hijo (x, y).
## Tipos de Constraints: BoxConstraints
Una `BoxConstraints` define 4 números:
- `minWidth`
- `maxWidth`
- `minHeight`
- `maxHeight`
### Tight Constraints (Estrictas)
Cuando `min == max`. El hijo no tiene opción, debe tener ese tamaño exacto.
Ejemplo: Si pones un widget dentro de un `SizedBox(width: 100, height: 100)`, el hijo recibe restricciones "tight" de 100x100.
### Loose Constraints (Relajadas)
Cuando `min == 0` y `max > 0`. El hijo puede ser tan pequeño como quiera, hasta el máximo.
Ejemplo: `Center` relaja las restricciones que recibe y se las pasa "loose" a su hijo.
### Unbounded (Infinitas)
Cuando `max == double.infinity`.
⚠️ **Peligro:** Si un widget intenta expandirse infinitamente en una restricción infinita, obtendrás el error "RenderFlex children have non-zero flex but incoming height constraints are unbounded" o similar.
Ejemplo: Un `ListView` (scrollable) da altura infinita a sus hijos. No puedes poner un `Expanded` directamente dentro de un `ListView`.
## Ejemplos Comunes y Errores
### 1. Center
El `Center` ocupa todo el espacio disponible (del padre) y permite a su hijo ser del tamaño que quiera (dentro de ese espacio).
### 2. Column / Row
- Toman el tamaño de sus hijos en la dirección principal (Main Axis).
- Pasan restricciones infinitas a sus hijos en esa dirección.
- **Error común:** Poner un `ListView` dentro de una `Column` sin envolverlo en `Expanded` o darle altura fija. La Column dice "sé tan alto como quieras" y el ListView dice "soy infinito" -> 💥 Error.
### 3. Expanded / Flexible
Solo funcionan dentro de `Row`, `Column` o `Flex`.
- `Expanded`: "Ocupa TODO el espacio restante".
- `Flexible`: "Ocupa COMO MÁXIMO el espacio restante" (puede ser más pequeño).
## RenderObjects Relacionados
Si quieres crear tus propios layouts personalizados, debes entender:
- **RenderBox:** El bloque básico de layout cartesiano 2D.
- **performLayout():** El método donde implementas la lógica (recibir constraints, medir hijos, posicionar hijos).
- **CustomMultiChildLayout:** Un widget de alto nivel para layouts personalizados sin bajar a RenderObjects.
## Debugging Layouts
Usa el **Flutter Inspector** para ver las restricciones y tamaños reales.
- Activa "Show Guidelines" para ver las cajas.
- Si ves franjas amarillas y negras: **Overflow**. El hijo quiso ser más grande de lo que el padre permitía (`Size > Constraints`).
## Conclusión
Entender que "Las restricciones bajan y los tamaños suben" elimina el 90% de las frustraciones con el diseño en Flutter. Si un widget no tiene el tamaño que esperas, mira a su padre: ¿Qué restricciones le está enviando?
Este apartado profundiza en los conceptos clave, proporcionando ejemplos prácticos y mejores prácticas para su aplicación en proyectos reales.
Al comprender estos detalles, podrás diseñar soluciones más robustas, mantenibles y escalables en tus aplicaciones Flutter y Dart.