Flutter — Widget ListView

2024-02-15T18:00:00-05:00 | 4 minutos de lectura | Actualizado en 2025-01-24T07:42:46-05:00

jaimetellezb

Tabla de Contenido

Tabla de Contenido
Introducción
Conclusión
Referencias

Introducción

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 builders itemBuilder crea elementos a pedido y separatorBuilder 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 constructores ListView.builder y ListView.separated para construir los elementos hijos.
itemCount usado por el contructor ListView.builder va la cantidad de elementos que tendrá el ListView. Y es requerido para el constructor ListView.separated .
separatorBuilder es requerido por el constructor ListView.separated , agrega un separador por widget.
childrenDelegate como vimos antes es un SliverChildDelegate y es requerido por el constructor ListViewCustom . 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 constructor ListView 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')),
          ),
        ],
      ),
    );
  }
}

demo

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} '));
        },
      ),
    );
  }
}

builder

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),
    );
  }
}

separated

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!