El widget Wrap de Flutter es bastante parecido al Row, pero cuando los elementos llegan al límite de su contenedor, se comienza una nueva fila.
Vamos a ver un pequeño ejemplo. Imaginad que tengo que hacer la app de un zoo con fichas de animales y que tengo que incluir una sección con una fila de iconos para consultar más animales. En principio podría pensar en usar un Row para organizar estos elementos y el código podría ser similar al siguiente:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Row(
children: <Widget>[
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Creative-Tail-Animal-zebra.svg/200px-Creative-Tail-Animal-zebra.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Creative-Tail-Animal-dolphin.svg/200px-Creative-Tail-Animal-dolphin.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Creative-Tail-Animal-flamingo.svg/200px-Creative-Tail-Animal-flamingo.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Creative-Tail-Animal-bee.svg/200px-Creative-Tail-Animal-bee.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Creative-Tail-Animal-elephant.svg/200px-Creative-Tail-Animal-elephant.svg.png"),
],
),
...
class AnimalIconWidget extends StatelessWidget{
String imageURL;
AnimalIconWidget(this.imageURL);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: const EdgeInsets.all(4.0),
child: Image.network(imageURL,width: 80,),
);
}
}
¿Que es lo que está pasando aquí? pues que tengo más iconos en la fila de los que caben y cuando en un Row pasa esto… obtenemos este mensaje de «verflowed» que nos informa de ello.
Con Wrap tenemos una posible solución a este problema. Si usamos un Wrap en lugar de un Row, veremos que cuando dejen de caber los elementos, lo que pasará es que comenzará una nueva fila para seguir mostrando estos elementos.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Wrap(
children: <Widget>[
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Creative-Tail-Animal-zebra.svg/200px-Creative-Tail-Animal-zebra.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Creative-Tail-Animal-dolphin.svg/200px-Creative-Tail-Animal-dolphin.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Creative-Tail-Animal-flamingo.svg/200px-Creative-Tail-Animal-flamingo.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Creative-Tail-Animal-bee.svg/200px-Creative-Tail-Animal-bee.svg.png"),
AnimalIconWidget("https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Creative-Tail-Animal-elephant.svg/200px-Creative-Tail-Animal-elephant.svg.png"),
],
),
...
class AnimalIconWidget extends StatelessWidget{
String imageURL;
AnimalIconWidget(this.imageURL);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: const EdgeInsets.all(4.0),
child: Image.network(imageURL,width: 80,),
);
}
}
Por supuestos tenemos un atributo que nos permite indicar el sentido del Wrap, de forma que no sólo podemos usarlo para crear filas, sino también columnas.