Trabajar con listas largas

El constructor estándar de ListView funciona bien para listas pequeñas. Para trabajar con listas que contienen una gran cantidad de elementos, lo mejor es usar el constructor ListView.builder.

A diferencia del constructor por defecto de ListView, que requiere crear todos los elementos a la vez, el constructor ListView.builder() crea los elementos a medida que se desplazan en la pantalla.

Primero, necesitas una fuente de datos. Por ejemplo, tu fuente de datos podría ser una lista de mensajes, resultados de búsqueda o productos en una tienda. La mayoría de las veces, estos datos provienen de internet o de una base de datos.

Para este ejemplo, genera una lista de 10 000 Strings usando el constructor List.generate.

List<String>.generate(10000, (i) => 'Item $i'),

Para mostrar la lista de cadenas, renderiza cada String como un widget usando ListView.builder(). En este ejemplo, muestra cada String en su propia línea.

ListView.builder(
  itemCount: items.length,
  prototypeItem: ListTile(title: Text(items.first)),
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

Para especificar la extensión de cada elemento, puedes usar prototypeItem, itemExtent, o itemExtentBuilder.

Especificar cualquiera de ellos es más eficiente que dejar que los hijos determinen su propia extensión porque el mecanismo de desplazamiento puede aprovechar el conocimiento previo de la extensión de los hijos para ahorrar trabajo, por ejemplo, cuando la posición de desplazamiento cambia drásticamente.

Usa prototypeItem o itemExtent si tu lista tiene elementos de tamaño fijo.

Usa itemExtentBuilder si tu lista tiene elementos de diferentes tamaños.