Convertir los wireframes en codigos de flutter

[Miguel2807]

Realizaremos los wireframes para cada apartado del programa que sea necesario para tener una buena base de donde empezar, puede que tenga cambios a futuro o sea diferente el proyecto final.

[Johan-G27]

Implementación del wireframe, "crear cuenta" en flutter

[Denubila]

Implementacion del wireframe "Login" en flutter

[Denubila]

Creación de un widget para su posterior implementación. Este formulario se puede apreciar en el wireframe para el tratamiento de enfermedades de los animales

[Miguel2807]

Página Principal de la Aplicación Web Adjunto imagen de la pagina principal de la aplicación web, basada en el wireframe de pagina principal explicado en el issue "Wireframes de toda la aplicación".

1. Interactividad de los Íconos Cada uno de los íconos presentes en la página es interactivo. Al hacer clic sobre ellos, se despliega un menú que ofrece variedad de opciones que llevarán a las otras páginas. Adjunto ejemplo:

2. Visualización de los Animales Cada tarjeta representa un animal dentro del sistema. Los datos principales que se muestran en la tarjeta incluyen: ID del animal. Estado del animal, representado por un color de fondo que indica su estado actual: • Verde: Indica que el animal está en buen estado ("Bueno"). • Amarillo: Representa una situación de advertencia ("Advertencia"). • Rojo: Indica que el animal está en peligro ("Peligro"). Cuando el usuario pasa el cursor sobre cualquiera de los dos iconos, aparece un mensaje señalando el estado del animal. Este sistema visual permite a los usuarios identificar rápidamente el estado de cada animal En caso de que el color no lo deje claro. Adjunto ejemplo:

3. Sistema de Búsqueda En la parte superior de la página, hemos implementado un apartado de búsqueda que permite encontrar animales por su ID. Esto facilita el acceso rápido a la información específica de cada animal. Además, se ha añadido un ícono de barras de menú que permite agregar filtros para hacer búsquedas más específicas, como por ejemplo: • Animales en estado de peligro. • Animales próximos a vacunarse. Etc.

4. Imágenes de los Animales Cada tarjeta incluirá una imagen del animal, que será obtenida directamente de la información asociada al animal en la base de datos. Esta imagen es requisito para poder registrar el animal en el formulario, si en dado caso, la foto no es cargada se mostrará una imagen genérica.

Este diseño de la página principal es un modelo preliminar, sujeto a modificaciones conforme implementemos la conexión con la base de datos y establezcamos las comunicaciones entre las distintas páginas de la aplicación. Sin embargo, este modelo nos proporciona una visualización de cómo queremos que funcione y se vea la aplicación.

[Jorgeivan6]

Wireframe de lista de usuarios pasado a codigo en flutter esta es la visualizacion de la version <1.0>

Version <2.0>

[jairoserrano]

Por favor subir el código a github,