Flutter — Widget ListView
4 min readFeb 15, 2024
En las aplicaciones móviles es muy común mostrar datos en listas, para suplir este patrón Flutter brinda un widget que es muy utilizado para estos casos, es el ListView.
ListView
Es muy sencillo se utilizar para manejar listas. Es el widget de desplazamiento más utilizado. Muestra los widgets uno tras otro.
Constructores
ListView
este constructor toma una lista de widgets con un tamaño fijo. Es recomendable usarlo para listas que contengan pocos elementos.ListView.builder
este constructor sirve para generar elementos bajo demanda. Es recomendado para usar con listas grandes o infinitas porque solo llama al constructor para los elementos que realmente se van a ver.ListView.separated
utiliza dos buildersitemBuilder
crea elementos a pedido yseparatorBuilder
crea elementos que separan un widget de otro. Se recomienda usar cuando tenemos un número fijo de elementos.ListView.custom
utiliza un SliverChildDelegate , que permite personalizar aspectos adicionales de los widgets hijos.
Propiedades
Veremos algunas de las propiedades más utilizadas en los ListView.
key
identificador del widget.scrollDirection
Es el sentido o dirección del scroll (desplazamiento), por defecto es de Vertical, pero se puede colocar horizontal también.reverse
cambia la forma en que se muestran los widgets, por defecto es false y es de arriba — abajo, si se coloca true queda de abajo — arriba. Lo mismo pasa cuando el scrollDirection es horizontal: true (izquierda — derecha) y false (derecha — izquierda).controller
se puede utilizar para controlar la posición de desplazamiento del ListView.shrinkWrap
se se coloca en true, limita el espacio de movimiento del ListView solo al que ocupan los widgets hijos, es decir, si tenemos dos widgets el desplazamiento será solo hasta el segundo no se extiende más de allí.padding
espacio para agregar los widgets.itemExtend
Si no es nulo, obliga a los hijos a tener la extensión dada en la dirección de desplazamiento.itemExtendBuilder
Si no es nulo, obliga a los hijos a que el constructor devuelva la extensión correspondiente.itemBuilder
es requerido por los constructoresListView.builder
yListView.separated
para construir los elementos hijos.itemCount
usado por el contructorListView.builder
va la cantidad de elementos que tendrá el ListView. Y es requerido para el constructorListView.separated
.separatorBuilder
es requerido por el constructorListView.separated
, agrega un separador por widget.childrenDelegate
como vimos antes es un SliverChildDelegate y es requerido por el constructorListViewCustom
. Este delegate proporciona los elementos secundarios.prototypeItem
Si no es nulo, obliga a los widgets hijos a tener la misma extensión que el widget dado en la dirección de desplazamiento.children
propiedad utilizada solo por el constructorListView
allí va la lista de widgets hijos.
Ejemplo ListView
class ListViewWidget extends StatelessWidget {
const ListViewWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
key: GlobalKey(),
scrollDirection: Axis.vertical, // por defecto es vertical
padding: const EdgeInsets.all(8.0),
children: [
// agregamos este espacio para que los widget empiecen abajo
// del área de configuraciones del dispositivo
const SizedBox(
height: 50,
),
Container(
height: 80,
color: Colors.green[500],
child: const Center(child: Text('Widget A')),
),
Container(
height: 70,
color: Colors.green[400],
child: const Center(child: Text('Widget B')),
),
Container(
height: 60,
color: Colors.green[300],
child: const Center(child: Text('Widget C')),
),
Container(
height: 50,
color: Colors.green[200],
child: const Center(child: Text('Widget D')),
),
],
),
);
}
}
Ejemplo ListView.builder
class ListViewBuilderWidget extends StatelessWidget {
const ListViewBuilderWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.blue[300],
border: Border.all(width: 0.5),
borderRadius: BorderRadius.circular(8),
),
child: Text('Widget ${index + 1} '));
},
),
);
}
}
Ejemplo ListView.separated
class ListViewSeparatedWidget extends StatelessWidget {
const ListViewSeparatedWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.separated(
itemBuilder: (context, index) {
return Container(
color: Colors.yellow,
child: Text('Widget $index'),
);
},
separatorBuilder: (context, index) => const Divider(
color: Colors.purple,
),
itemCount: list.length),
);
}
}
Conclusión
El ListView es un widget de mucha utilidad para los desplazamientos no solo verticales aunque es lo más usado, sino también horizontales configurando la propiedad scrollDirection
. Aunque para horizontales hay otros widgets más recomendados.
¡¡¡Gracias por leer este artículo!!!