Evilnapsis

Programming, Hacking and More

Flutter

Rellenar un ListView usando el builder en Flutter

El ListView tambien cuenta con un builder, que basicamente sirve para crear la lista apartir de un array de datos.

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"] ;

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.

Agustin Ramos

Desarrollador de Software

Leave a Reply