Inicio » Cursos » Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Capitulo 30 ➜ Planteamiento de la app en Flutter

Planteamiento de la app en Flutter

Planteamiento de la app en Flutter | Curso Flutter y Laravel Tienda

Diseño del flujo de navegación e interacción de la app en Flutter, con un editor de imágenes que nos permita bosquejar las pantallas

Planteamiento de la app en Flutter | Curso Flutter y Laravel Tienda Delivery

En esta sección vamos a definir el flujo de navegación e interacción del proyecto que desarrollaremos usando el SDK de Flutter

  1. Pantalla inicial
  2. Pantalla Login
  3. Pantalla Registro
  4. Pantalla Productos
  5. Pantalla Carrito

Utilizaremos un editor de imágenes para bosquejar la estructura de cada pantalla

Planteamiento de la app en Flutter | Curso Flutter y Laravel Tienda Delivery

En esta sección vamos a definir el flujo de navegación e interacción del proyecto que desarrollaremos usando el SDK de Flutter

  1. Pantalla inicial
    • Basicamente debe mostrar el logo que será una imagen en formato PNG
    • Adjuntamos en la parte inferior un botón con una interacción donde un click lanzará a la siguiente pantalla de Login si es que no existe  login.
    • El fondo será de color Amber
    • Mostrar un gráfico lateral izquierdo con un texto vertical
  2. Pantalla Login
    • Fondo de color Amber
    • Campo para ingresar un email
    • Un segundo campo para ingresar el password
    • Un tercer widget para incrustar un boton para ejecutar el login con la API rest con Laravel 
  3. Pantalla Registro
    • Fondo de color Amber
    • Un campo para ingresar el nombre
    • Un segundo campo para ingresar email
    • Más un tercer campo para ingresar el password
    • Finalmente incrustar un botón para procesar el registro de un nuevo usuario con al API Rest
  4. Pantalla Productos
    • Mostrar los productos clasificados por categorías, subcategorías
    • Por cada producto se mostrará datos como una foto, nombre, precio y un botón para agregar al carrito de compra dicho producto.
  5. Pantalla Carrito
    • Lista de los productos que han sido elegidos para su pedido con datos como: la foto, el nombre, el precio, la cantidad y el precio final.
    • Agregaremos interactividad como el botón incrementar y decrementar, además de un botón de procesar pedido.

Utilizaremos un editor de imágenes para bosquejar la estructura de cada pantalla


2002 visitas

Sigue con el curso: Capítulo 31 – Creación del Proyecto Flutter

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023