Es algo bastante común utilizar Rows y Columns para estructurar los elemento de nuestras pantallas en Flutter. En principio todos los elementos de una misma fila o columna tienen la misma importancia y se les da el mismo espacio. Si queremos que uno de los elementos ocupe más espacio que los demás, podemos usar el widget Expanded. El widget que esté dentro de un Expanded, ocupará todo el espacio restante disponible.
Vamos a verlo con un pequeño ejemplo. Imaginemos que quiero crear un buscador muy sencillo, que contenga un texto, seguido de un campo para introducir el criterio de búsqueda y por último un botón para buscar. Esto lo puedo hacer por ejemplo con un Row que incluya a los otros tres widgets.
2
3
4
5
6
7
8
9
children: <Widget>[
Text("Buscar"),
Expanded(
child: TextField()
),
IconButton(icon: Icon(Icons.search),)
],
),
Incluyo mi TextField en un Expanded Widget y como vemos este elemento del Row ocupa más espacio que el resto. En ese caso Flutter está dando a los otros dos widgets la anchura que necesita su contenido, mientras que al Expanded que engloba al TextField le da el resto del espacio.
En el caso de este ejemplo con un TextField, si quitamos el Expanded y ponemos el TextField dentro del Row directamente, podríamos obtener un error «flutter boxconstraints forces an infinite width». Esto es así porque el TextField no tiene un ancho concreto y Flutter necesita poder calcular cuál es el ancho que necesitan todos los elementos de un Row. Si usamos un Expanded para indicar que queremos que el TextField ocupe todo el espacio posible, Flutter se queda tranquilo.
Podemos usar Expanded en más de un elemento del mismo Row o Column, en ese caso se repartirían el espacio disponible. Hay un atributo de Expanded llamado «flex», con el que podemos indicar prioridades en caso de empate cuando se da este caso.