Flutter + WooCommerce REST API

Flutter + WooCommerce REST API

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.

Etiquetas:

Estaremos encantados de escuchar lo que piensas

Deje una respuesta