Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Flutter

¿Cómo crear tu lista en tu aplicación con Flutter?

Spanish (Español) translation by Xiomara Reynoso (you can also view the original English article)

Una lista es la clave de los elementos de UI para aplicaciones móviles. Aprenderás cómo crear una lista en una aplicación de Flutter con este tutorial. 

No necesitas ser un experto para crear listas en la aplicación de Flutter. Si en el pasado has desarrollado aplicaciones para Android o iOS, Flutter ListView será como pan comido. Y si solamente estás comenzando con el desarrollo de Flutter, solamente sigue y verás lo fácil que puede llegar a ser. 

En este tutorial, se mostrarán unos ejemplos de algunos patrones ListView comunes en Flutter. Puedes fácilmente reusar estos para tu magnifica aplicación. 

Ejemplos de Flutters ListView

Ahora comencemos un proyecto utilizando el estudio de Android con flutter 1.0 y lo llamaremos Flutter_view.

Entonces, ten en cuenta que este código aquí funciona como una cabecera para todos los fragmentos de códigos de ListsViews que se mencionarán a continuación de la misma.

Esencialmente, hay algunos tipos de ListeView que pueden ser usados como un proyecto de Flutter. La elección depende las listas estéticas y la interfaz de usuario de la aplicación. A menudo se les pide a los desarrolladores que encuentren un balance entre la creatividad y practicidad para el menú de barras y las listas de opciones de la aplicación.

Veamos la diferencia de tipos de listas que puedes tener en la aplicación de Flutter.

Lista Estática

Cuando tienes opciones limitadas, puedes usar listas estáticas predeterminadas encontrarás en el constructor ListView de Flutter. Las listas estáticas son ideales para crear una pagina de menú.

Aquí hay un fragmento de código que puedes utilizar:

Y aquí está como se debería de ver:

Esta lista de colores solo incluye los títulos, pero los puedes personalizar los ListTitle con subtítulos, imágenes, e incluso iconos. 

Lista Dinámica 

Cuando creas una lista estática, todos los elementos son creados al mismo tiempo. Listas cortas se beneficia de esta técnica. Sin embargo, cuando ofreces una lista larga de opciones como escoger un país para un envió internacional, entonces necesitas el constructor ListView.builder() para crear una lista dinámica. 

Reemplaza tu aplicación con este código myListView() 

Su aplicación ahora ofrecerá una lista como esta: 

Cuando pongas un itemCount en el código, entonces la ListView constructora en Flutter prepara un especifico numero de opciones al mismo tiempo. El itemBuilder se puede usar también para ver cada una de las ListTitle individualmente. El uso de un index hace más fácil la extracción de datos de la lista de los nombres de los países Europeos que han sido usados como el respaldo de información. 

Listas Infinitas

Muchas aplicaciones requieren listas infinitas, esto ha sido siempre un desafío para Android y iOS en el pasado. Sin embargo con Flutter, puedes simplemente alterar el parámetro de itemCount y cambiar la ListTitle para mostrar el índice de la file así: 

Aquí está el fragmento del código:

Este código solo genera dinámicamente cada una de las ListTitle cuando es necesario, entonces la vista previa puede tener todas las filas que necesites. La ListView inteligentemente decidirá cuando generar cada título para que este esté disponible cuando esa parte de la lista esté visible.   

Si quieres llevarlo un paso más allá entonces puedes agregar divisores en la lista dinámica para que la aplicación esté visiblemente más organizada. Aquí está como puedes hacerlo. 

Y aquí está como la lista se ve con los divisores. 

La altura y los colores de estos divisores puede ser cambiada con argumentos en el constructor Divider().

Listas Horizontales

Mientras todas las listas previas han estado en el eje y, ¡puedes fácilmente crear una lista horizontal en Flutter! Una simple especificación en el scrollDirection puede ser usada en un diseño personalizado para acomodar una lista horizontal. 

Aquí está como lo puedes hacer. 

Y aquí está como la lista se ve desde un eje horizontal:

ListTitle personalizado

Ahora que hemos cubierto los tipos más comunes de ListViews, es tiempo de aumentar la estética de la aplicación. Flutter asegura que tu aplicación móvil se va a ver fácil y ofrece una extensa variedad de widgets para acomodarse a las necesidades del desarrollador. 

La ListTitle widget es usada para manejar el contenido normal mostrado en las listas. Esto funciona cuando no hay personalizaciones implicadas en el diseño. 

Cuando creamos la primera lista de colores, solo usamos ListView. Ahora nosotros podemos introducir detalles como imágenes, subtítulos, e incluso iconos.

Sigue lo siguiente:

Con este código se va a ver así:

Mientras la habilidad-táctil de la lista puede ser alternado con onTap, nosotros personalizaremos la lista un poco más allá. Si quieres agregar imágenes en vez de iconos para personalizar la aplicación, entonces el widget recomendado es CircleAvatar.  

Puede ser alternada con NetworkImage (imageUrl) y dejar el AssetImage (path) pero recuerda, cuando necesites que las imágenes se contengan por sí mismas, lo último es la mejor opción. 

Registra la ubicación de los activos en pubspec.yaml:

Reinicia la aplicación y estará listo!

Listas de Flutter y Fuentes de Datos

Finalicemos con algo interesante: ¿sabías que Flutter te permite crear una fuente de datos con varios tipos de artículos y también facilita la conversión de esa fuente de datos a una larga lista de widgets?

Entonces, puedes usar la lista de Flutter para mostrar un encabezado con una lista de opciones o expandir sobre las especificaciones de los detalles de los productos, ¿encabezado por encabezado?

Primero echemos un vistazo a la lista completada:

Y aquí está el código que generó esa lista:

El código para este ejemplo es un poco más complicado que los demás y no voy a explicar los detalles. Pero siéntete libre de jugar con el código y ve si puedes hacerlo funcionar en el modo que quieras para tu aplicación! Este elemento te ofrece una gran manera de mantener una enorme cantidad de contenido en tu organizada aplicación. 

Pensamientos Finales

Con ListViews puedes agregar subtítulos y cartas para mejorar la estética e incluso optar por ideas maximalistas para tu aplicación también. Sin embargo, yo te sugiero mantener tu diseño al mínimo ya que esa es la tendencia de diseño para el año.   

Pero ¡la decisión es tuya!

Yo espero que esto te haya ayudado a entender lo básico de las listas y un poco de la personalización. Al final, todo depende de cuán creativo quieras ser, porque las posibilidades que ofrece Flutter son ilimitadas. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.