Rellenar un ListView usando el builder Flutter

El ListView tambien cuenta con un builder, que basicamente sirve para crear la lista apartir de un array de datos, es la forma mas eficiente de manejar datos dinamicos.

Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →

Para crear el ListView usando el builder primero debemos tener un array de datos.

El array de datos que vamos a usar es el siguiente.

  static const List<String> paises = ["Argentina", "Belice", "Brasil","Costa Rica","Chile","Colombia","Guatemala", "Mexico","Panama","Paraguay","Peru","Uruguay","Venezuela"] ;

Para que funcione, este widget requiere dos parámetros fundamentales que definen su comportamiento:

1. itemCount: Es un entero que le dice a Flutter cuántos elementos tiene la lista en total. Normalmente usamos el .length de nuestro array o lista de objetos.
2. itemBuilder: Es una función que se ejecuta por cada elemento. Recibe el context y el index (la posición actual), y debe retornar el widget que queremos mostrar (como un ListTile).

Y el siguiente codigo es el que vamos a usar para construir la lista usando ListView.build .

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

Y con esto se va a construir la lista.

Podemos ver que al usar ListView.builder hay 2 parametros.

itemCount. es el numero de elementos que va a haber en la lista.

itemBuilder. es una funcion que se ejecuta N veces donde N es el numero que hay en itemCount, y el parametro “index” se va incrementando para lograr algo asi como un ciclo for.

Codigo completo

A continuacion el codigo completo que use para el ejemplo.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HelloList(),
    );
  }
}
class HelloList extends StatelessWidget {
  const HelloList ({super.key});
  static const List<String> paises = ["Argentina", "Belice", "Brasil","Costa Rica","Chile","Colombia","Guatemala", "Mexico","Panama","Paraguay","Peru","Uruguay","Venezuela"] ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Usando List.builder()")),
      body:ListView.builder(
      itemCount: paises.length,
      itemBuilder: (context, index){
      return ListTile(title: Text(paises[index] ));
    })
    );
  }
  
}

Resultado

Y el resultado es el siguiente.

Ventajas de usar Builder

• Eficiencia: Si tienes una lista de 1,000 registros, el ListView.builder no crea los 1,000 widgets de golpe; solo crea los 6 o 7 que caben en la pantalla del celular.
• Escalabilidad: Es el componente perfecto para conectar con el backend. Al recibir un JSON, simplemente lo conviertes en una lista de Dart y el builder se encarga de renderizarlo automáticamente.
• Interactividad: Al usar el parámetro index, es muy fácil identificar qué elemento tocó el usuario para abrir una pantalla de edición o eliminar el registro.

Tip Pro: Si quieres que tu lista tenga una línea divisoria elegante entre cada tarea, puedes usar ListView.separated. Funciona exactamente igual, pero añade un tercer parámetro llamado separatorBuilder donde puedes retornar un widget Divider().