Un elemento importante a la hora de realizar aplicaciones móviles son las listas. Una lista puede ser cualquier cosa, por ejemplo en tu feed en la aplicación de Facebook tienes una lista de publicaciones, en tu aplicación de Whatsapp tienes una lista de conversaciones y dentro de cada conversación tienes una lista de mensajes, etc.
En esta ocasión vamos a conocer cómo usar estas Listas en Flutter para que puedas hacer cosas similares en tus aplicaciones creadas con este SDK. Está funcionalidad es indispensable cuando estamos consumiendo datos de internet ya que en la mayoría de los casos la necesitamos para esto. Para mejorar la comprensión he creado un vídeo en mi canal de YouTube.
En esta aplicación vamos a crear una aplicación para gestionar contactos. Crearemos una aplicación en Flutter donde pondremos ver los items de una lista. Claro que la lista será estática, aún no he mostrado cómo conectar con una base de datos. Eso lo veremos en siguientes artículos.
Creamos la clase
Para comenzar con la aplicación creamos una clase a la que llamé Persona. Esta clase es sencilla y solo contiene 3 propiedades para conocer el nombre, apellido y el número de teléfono de cada una de las personas que tendremos en nuestros contactos.
Voy a dejar el código de la clase. Si no sabes lo que es una Class en Dart te recomiendo que veas este artículo donde explico lo qué es una Class en Dart y Flutter y como funciona y para que sirven a la hora de programar.
class Persona{
String name;
String lastname;
String phone;
Persona(name, lastname, phone){
this.name = name;
this.lastname = lastname;
this.phone = phone;
}
}
Cuando ya tenemos la clase ya podemos empezar a crear listas con elementos de esa clase. Un lista de contactos es literalmente una lista de personas, con nombre, apellido y número de teléfono. Quise hacerlo así para dejar el ejemplo más sencillo y enfocarnos solo en lo que corresponde a las listas.
Podría interesarte: 5 Razones ¿Por qué aprender Flutter este 2020?
Comencemos a crear una lista
Para crear una lista comenzamos con la palabra reservada List que le dice a Flutter que lo que viene es una lista de elementos. Si queremos especificar que es una lista de elementos de la clase Persona pues lo ponemos entre signos de menor y mayor qué. Así:
List<Persona> _personas = []
Si se fijan estoy igualando la variable a [ ]; Para los que ya han programado con otros lenguajes de programación sabrán que esto hacer que lo que haya dentro de la variable sea un Array vacio. Bueno, una lista es básicamente un Array. Ahora vamos a llenar este array:
List<Persona> _personas = [ Persona( "Jose", "Galdamez", "+504 3175-1455" ), Persona(....), Persona(....), ]
Aquí puedes poner todos los elementos de la clase Persona que quieras, puedes poner 10 o solo 3 y funcionará igual. Yo puse 1 y los demás no son válidos, pero puedes poner dentro los valores que quieras para volverlo válido.
Ya con esto tenemos una lista de elementos. Cuando consumimos una API desde Internet, normalmente obtenemos una lista de valores o un archivo con formato JSON con el que tenemos que crear una lista para poder mostrarlo en la APP. Por eso es tan importante.
Podría interesarte: ¿Qué es el formato JSON y para qué sirve?
El siguiente paso sería representar los valores en la pantalla. Para eso se usa un Widget llamado ListView el cual posee un método llamado .builder( ). En el vídeo explico cómo utilizarlo.
Eso es todo por el momento, espero que te haya gusto y sobre todo espero que te haya servido. Si tienes alguna duda, puedes dejarla en los comentario y con gusto te ayudaré. Un abrazo y hasta la próxima.