Inicio » Cursos » Flutter y Laravel Tienda Delivery

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

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

Lección 30: Planteamiento de la app en Flutter

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


1628 visitas

Cursos que pueden interesarte

Codea App Codea App

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2023