List en Flutter

Author
Por Darío Rivera
Publicado el en Flutter

La clase List representa una colección iterable de de objetos. Con esta clase podemos guardar varios objetos del mismo tipo y utilizar todos los métodos que trae de manera nativa List para recorre colecciones y realizar transformaciones a cada elemento.

Definición de List

Para definir la colección de elementos iterables podemos utilizar la clase List seguido del tipo de dato que contendrá la lista.

List<type> varName = [
  var1,
  var2,
  ...
];

Recorrer una lista de Strings

Supongamos que tenemos la siguiente lista de strings:

List quotes = [
  'The greatest glory in living lies not in never falling, but in rising every time we fall.',
  'The way to get started is to quit talking and begin doing.',
  'If life were predictable it would cease to be life, and be without flavor.'
];

Para recorrer esta lista basta utilizar el método map de manera muy similar a como lo usaríamos en JavaScript.

Column(
  children: quotes.map((text) {
    return Container(
        padding: EdgeInsets.all(20),
        child: Text(
          text,
          style: TextStyle(
            fontSize: 25,
            color: Colors.green
          ),
        )
    );
  }).toList()
)

Observa que hemos utilizado el método toList() para devolver la lista de widgets que necesita la propiedad children de Column. El resultado sería similar al siguiente:

icon widget

Recorrer una lista de Objetos

Supongamos que tenemos la siguiente clase Quote.

class Quote {

  String text;
  String author;

  Quote({ this.text, this.author });
}

Para iterar esta clase primero debemos definir la lista en referencia a este tipo de dato así:

List quotes = [
  Quote(author: 'Nelson Mandela', text: 'The greatest glory in living lies not in never falling, but in rising every time we fall.'),
  Quote(author: 'Walt Disney', text: 'The way to get started is to quit talking and begin doing.'),
  Quote(author: 'Eleanor Roosevelt', text: 'If life were predictable it would cease to be life, and be without flavor.')
];

Seguido a esto debemos utilizar las propiedades del objeto Quote.

Column(
  children: quotes.map((quote) {
    return Container(
        padding: EdgeInsets.all(20),
        child: Text(
          '${quote.text} - ${quote.author}',
          style: TextStyle(
            fontSize: 25,
            color: Colors.green
          ),
        )
    );
  }).toList()

El resultado sería el siguiente.

icon widget


Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.