PIXEL FACEBOOK
[google-translator]

Cree una galería de productos de comercio electrónico intuitiva con Flutter

Lo que vas a encontrar...

Crear una experiencia de usuario excepcional es esencial para el éxito de su aplicación. No importa qué tan bueno sea el producto que venda, si su aplicación no ofrece una UX positiva, tendrá dificultades. En este tutorial, aprenderá cómo crear una galería de productos intuitiva con Flutter y brindar una mejor experiencia de compra.

Crearemos una aplicación de muestra que enumera los productos de una manera atractiva: al tocar un producto, animaremos una página de detalles del producto donde puede establecer su cantidad y agregarlo al carrito. En la parte superior también verá la cantidad de artículos agregados al carrito, y cuando haga clic en él, podrá ver una lista de todos los productos que se agregaron al mismo.

Al final de este tutorial, aprenderá cómo crear pantallas más grandes, permitir la búsqueda de productos, alternar la vista, administrar el estado del carrito y agregar movimiento de material mientras navega entre pantallas para una experiencia de usuario fluida.

Así es como se verá nuestra galería de productos de comercio electrónico de Flutter cuando esté completa:

Ejemplo final de una aplicación de comercio electrónico

Esto es lo que cubriremos en este tutorial:

Creación del proyecto

Antes de comenzar, debe instalar Flutter SDK y crear un proyecto básico. Veamos cómo hacer esto.

Primero, obtén el SDK de Flutter desde este enlace. Una vez instalado, comprueba si todo está bien pulsando el siguiente comando en la terminal:

(Nota: si algo está marcado con una marca roja, debe cuidarlo antes de continuar)

Ahora cree un directorio donde desee crear este proyecto e ingrese el siguiente comando. Esto creará un nuevo proyecto en el directorio especificado.

Para abrir, modificar el contenido del archivo y ejecutar/depurar/probar el proyecto, necesita instalar el IDE. Puede elegir uno de los siguientes editores:

Abre el carpetadelproyecto/lib/main.dart y ejecute la aplicación de arranque desde el IDE presionando el botón de reproducción. También puede ejecutarlo desde la línea de comando ingresando el siguiente comando:

Creación de pantallas

La aplicación de muestra consta de tres pantallas: la lista de productos, los detalles del producto y la página del carrito de compras.

Veamos cómo encajan estas pantallas en el flujo:

Aplicación de comercio electrónico de tres pantallas

Primero, verás todos los productos. Toque cualquier elemento para abrir la página de detalles. Puede agregar artículos al carrito de compras e ir a la página del carrito de compras.

Listas de productos

La primera pantalla muestra todos los productos con su nombre, imagen y precio. Aquí puede buscar productos y cambiar la vista entre vista de cuadrícula y vista de lista. Al tocar el artículo, se abre la página de detalles del producto.

Más artículos interesantes de LogRocket:

Estos son algunos de los widgets esenciales que puede usar para crear la primera pantalla:

Pantalla de lista de productos

Aquí está el código exacto para crear este contenedor:

Detalles de producto

La página de detalles del producto muestra información del producto. Le permite establecer la cantidad del producto y agregarlo al carrito. También puede abrir el carrito de compras desde esta página.

Estos son algunos de los widgets esenciales que puede usar para crear la pantalla de detalles del producto:

Pantalla de detalles del producto

El widget de insignia no es el widget estándar; en cambio, se agrega desde una biblioteca llamada Insignias. Esto anima automáticamente la insignia cuando se actualiza el valor.

Aquí está el código que muestra la insignia sobre el artículo del carrito:

Carro

Esta página muestra la lista de todos los artículos agregados al carrito con la opción de eliminar cualquier artículo del carrito. Aquí puede ver todos los resúmenes de precios y una opción de pago.

Estos son algunos de los widgets importantes que puede usar para crear la pantalla del carrito de compras:

Pantalla de carrito de comercio electrónico

Aquí se explica cómo mostrar una lista de todos los artículos en un carrito:

Agregar productos

Una vez que la interfaz de usuario esté lista, puede completar la lista de productos agregando varios productos. En un escenario real, completaría esta lista con elementos obtenidos de su backend, pero agregaremos productos localmente en una variable para simplificar.

Primero, cree una clase de producto que contenga campos como id, nombre, imagen, precio y cantidad.

Ahora cree una lista de varios productos usando la clase anterior. Así:

Así mismo, puedes añadir más productos si lo deseas. Una vez que esta lista esté lista, es hora de continuar y usarla para inflar el widget GridView, como se muestra a continuación:

construye el carro

La funcionalidad central de cualquier aplicación de comercio electrónico es la capacidad de agregar productos al carrito para comprarlos. Para crear esta funcionalidad, puede integrar la gestión de estado en su aplicación.

Para esta aplicación, usaremos la técnica de administración de estado llamada Bloque porque puede separar la lógica comercial de la interfaz de usuario y es más fácil escribir y reutilizar pruebas.

Aquí hemos explicado cómo usar el patrón de diseño de bloque en una publicación de blog.

La gestión del estado del bloque requiere la adición de tres clases esenciales: bloque, evento y estado. Para agregar o eliminar artículos del carrito, agregaremos las siguientes clases:

CarritoBloque

Aquí es donde reside la lógica empresarial (agregar y eliminar elementos).

(Nota: _cartItems es una fuente única de información para administrar artículos del carrito)

CarritoEvento

Esto se utiliza para enviar artículos al bloque del carrito.

Estado del carrito

Esto se utiliza para enviar elementos a la interfaz de usuario.

Desde la interfaz de usuario (un botón con el texto «Agregar al carrito»), puede insertar el siguiente código para agregar el artículo a la lista:

Para eliminar el producto del carrito, simplemente puede activar el evento para eliminar el artículo, así:

Para recuperar artículos del carrito, puede envolver GridView o ListView en el generador de bloques, y la lista se actualiza cada vez que se agrega o elimina el artículo.

Agregar capacidad de respuesta

También puedes adaptar la versión web de tu aplicación. Esto significa que los usuarios no deberían sentir que están usando una aplicación móvil en un navegador; más bien debería dar la impresión de que es una aplicación web nativa.

Para esta aplicación, podemos mostrar más elementos cuando la aplicación se usa en una pantalla más grande. Es posible que se sorprenda al saber que esto se puede lograr con solo un pequeño cambio en el código.

Así es cómo:

Puede envolver el widget GridView en LayoutBuilder, que proporciona las restricciones utilizadas para determinar el ancho y el alto. Usando restricciones, podemos construir varias interfaces de usuario.

Para nuestro ejemplo, en el código anterior, cada vez que la resolución de la pantalla cambia a 700 o más de ancho, mostramos cuatro elementos en el eje transversal.

Así es como funciona:

Tamaño del sitio web móvil de la aplicación de comercio electrónico

Alternar vista de visualización de productos

A veces, es posible que desee permitir que los usuarios cambien la vista actual (es decir, GridView) y la muestren en ListView.

Para hacer esto, puede crear una variable booleana (probablemente dentro del bloque) y alternar su valor. Según esta variable, puede configurar dos widgets, GridView y ListView, y cambiar el icono.

Aquí se explica cómo cambiar el icono:

Aquí está el código para elegir la lista a mostrar:

Búsqueda de Producto

Para permitir que los usuarios busquen en una lista, puede aprovechar el evento onChanged de TextFormField. Esto le da los últimos caracteres ingresados ​​en TextFormField. Puede usarlo para filtrar la lista principal y luego proporcionar el resultado de la búsqueda en una nueva lista, como se muestra a continuación:

La variable isSearchStarted se utiliza para indicar si mostrar o no el resultado de la búsqueda.

Adición de animaciones (sistema de movimiento de materiales)

Es posible que desee agregar animaciones para mejorar la experiencia del usuario. En lugar de tener una transición de navegación predeterminada, puede agregar una animación que abre suavemente la página de detalles del producto cuando se toca.

Puede usar el conjunto de ajustes preestablecidos de animación del sistema de movimiento Material agregando la Biblioteca de animación a su aplicación.

Para hacer esto, envuelva su widget en OpenContainer y especifique la página que desea animar en el parámetro openBuilder.

Aquí está el código:

Esto es lo que parece:

Transición de aplicaciones de comercio electrónico

El código fuente completo de esta aplicación de comercio electrónico Flutter se puede encontrar en GitHub aquí.

Conclusión

Crear una experiencia de usuario intuitiva es esencial para una aplicación de comercio electrónico. Este tutorial le mostró cómo desarrollar grandes pantallas y exhibir productos de una manera atractiva.

También aprendimos a usar técnicas de administración de estado como Block para administrar elementos del carrito de compras y mejorar la aplicación agregando funciones como alternar, buscar y animaciones.

Facebook
Twitter
LinkedIn
WhatsApp

Deja una respuesta

Artículos Relacionados