4

En este post estaremos obteniendo información desde WooCommerce de WordPress y lo consumiremos dentro de nuestra App hecha en Flutter.

Para este proyecto necesitaremos tener acceso a WooCommerce en nuestro WordPress y generar unas claves, “consumer_key y consumer_secret” las cuales nos darán permiso para poder acceder a la información de WooCommerce a travez de http.get

Luego maquetaremos el contenido y también lo haremos navegable para ver detalles del producto.

Ahora programaremos nuestra pantalla de inicio, y además añadiremos a nuestro ListView un FutureBuilder el cual nos ayudará a construir el contenido que obtendremos desde WooCommerce.

Al terminar este vídeo obtendremos una lista de productos en nuestra App. En el siguiente vídeo pasaremos a maquetar el contenido: descripción, imagen y precio.

Repositorio GitHub: https://github.com/baldomerocho/WooCommerce-Flutter-App déja tu like o una estrella.

En este vídeo obtenemos datos y mostramos la primera imágen disponible de los productos. Además creamos la navegación a la pagina de detalles de nuestro producto seleccionado.

En el siguiente vídeo agregaremos un carrusel de imágenes, se recomienda que cada uno de nuestros productos cuente con un mínimo de 3 imágenes en su galería.

Esto desde WordPress podemos subirlas y seleccionarlas facilmente, las cuales se agregarán a una lista que luego tomaremos de la REST API.

Aquí, también sigue siendo importante el uso de consumer_kay y consumer_secret

En este vídeo agregaremos una dependencia más que consiste en un carrusel de imágenes a partir de una lista, en este caso tomaremos la lista de imágenes disponibles y las mostraremos como un carrusel deslizable de lado a lado y con flechas.

Pero primero, agregaremos la descripción en un WidgetHtml, el cual mostrará el contenido maquetado casi tan parecido a como se muestra en nuestra Web.

También agregaremos el precio, y para futuros vídeos, podriamos crear diferentes maneras de ver los precios según como estén disponibles en nuestra tienda en línea.

unFuturista
Vemos el futuro, no para cambiarlo sino para cumplirlo.

FutureBuilder initialData ¿Para que sirve y como usarlo?

Previous article

¿Como reducir el tamaño de las aplicaciones desarrolladas en flutter? PlayStore y AppGallery

Next article

You may also like

4 Comments

  1. Hola ! excelente articulo. Tienes canal para seguirte ? me parece que es muy importante este tipo de contenidos con la demanda que tiene WooCommerce ahora. Seria bueno el carrito y las categorías padre y el login jejeje quedaría completa. gracias felicitaciones éxitos.

    1. Hey John. Claro, mi canal es el mismo desde donde están publicados los vídeos de este post. Tengo planeado continuar, pero no he tenido tiempo desde fin de año. Pero subiré algo estos días. Saludos.

  2. Hola! Muy buen articulo, pero tenes idea si se puede crear con woocommerce y flutter una app de reservas?

    1. Gracias por tu comentario.
      No lo he hecho, pero en WordPress puedes necesitar un plugin para agregar estas acciones. Con lo cual, debes fijarte en que el plugin también tenga lectura y escritura a travez de la REST API.

      Habiendo aclarado esto, en Flutter ya podrás manipular todos los datos a tu manera.

      Saludos,

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

More in Flutter