Scribd
Cargar
8 vistas8 páginas

Informe DAM

El documento detalla el desarrollo de una aplicación móvil de control de gastos personales utilizando Flutter, incluyendo su diseño en Figma y la estructura de carpetas del proyecto. Se describen las pantallas principales de la aplicación, sus funcionalidades y el uso de SharedPreferences para almacenamiento local. Además, se proporciona un enlace a un video explicativo y al repositorio remoto del proyecto.

Cargado por

Roberto Méndez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
8 vistas8 páginas

Informe DAM

El documento detalla el desarrollo de una aplicación móvil de control de gastos personales utilizando Flutter, incluyendo su diseño en Figma y la estructura de carpetas del proyecto. Se describen las pantallas principales de la aplicación, sus funcionalidades y el uso de SharedPreferences para almacenamiento local. Además, se proporciona un enlace a un video explicativo y al repositorio remoto del proyecto.

Cargado por

Roberto Méndez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

ESCUELA SUPERIOR

DE INNOVACIÓN Y TECNOLOGÍA

TÉCNICO SUPERIOR UNIVERSITARIO


EN DESARROLLO DE SOFTWARE EN CÓDIGO ABIERTO

DESARROLLO DE APLICACIONES MÓVILES (DAM)

DESARROLLO DE UNA APP DE


CONTROL DE GASTOS
PERSONALES CON FLUTTER

PROFESOR
Jhonathan Vladimir Mate Villanueva

INTEGRANTES - GRUPO 14
Ana Amelia Lima Hernández
Daisy Guadalupe López Carpio
José Roberto Méndez Sosa
Ariel Gustavo Santos Martínez

DOMINGO 18 DE MAYO | CICLO I - 2025


DISEÑO EN FIGMA

El prototipo de diseño fue realizado utilizando Figma, en el siguiente


proyecto: Figma - app-control-de-gastos

VistaCategorías

VistaPrincipal

VistaGastos
DISEÑO DE APLICACIÓN

La estructura de carpetas del proyecto se encuentra de la siguiente forma:

Imagen utilizada

Modelo para crear nueva Categoría en BD


Modelo para crear nuevo Gasto en DB

Animación para el botón de refrescar


Pantalla de categorías
Pantalla de gastos
Pantalla de inicio
Animación pantalla de carga

Solución para almacenamiento Local

Pantallas Principales (screens/)

1. SpSc.dart (Splash Screen)


Pantalla inicial con animación de fade-in
Muestra el logo (logoesit.png)
Redirige automáticamente a home_page.dart después de 3 segundos
Incluye un degradado morado/azul como fondo

2. home_page.dart (Página Principal)


Actúa como contenedor de la interfaz principal
Probablemente incluye un BottomNavigationBar o Drawer para navegación
Integra widgets como resumen de gastos y botones de acceso rápido

3. gastos_page.dart (Página de Gastos)


Listado de transacciones/gastos registrados
Funcionalidades:
Filtrado por fecha/categoría
Posible gráfico de gastos mensuales
Botón "Añadir gasto" (redirige a un formulario)
4. categories_page.dart (Página de Categorías)
CRUD de categorías de gastos
Lista interactiva con:
Tarjetas por categoría (CategoryCard)
Opciones de edición/eliminación
Botón "Añadir categoría"

5. animated_refreshbutton.dart (Widget Reutilizable)


Botón de actualización con animación personalizada
Usado probablemente en gastos_page.dart o home_page.dart
Efecto visual al pulsar (rotación o cambio de color)

Widgets Clave (basados en servicios y modelos)

1. CategoryCard (Implícito en categories_page.dart)


Muestra:
Icono de categoría
Nombre
Presupuesto/monto asignado
Diseño: Tarjeta con sombra y bordes redondeados

2. ExpenseItem (Implícito en gastos_page.dart)


Item de lista para gastos individuales
Muestra:
Monto
Categoría (con color identificativo)
Fecha
Posible swipe-to-delete

3. AnimatedCircularChart (No visible en estructura pero probable)


Gráfico circular para resumen de gastos por categoría
Usado en home_page.dart
ALMACENAMIENTO LOCAL

Se utilizó SharedPreferences para almacenar los datos ya que fue el


método más sencillo de aplicar y la cantidad de datos era lo suficientemente
pequeña como para ajustarse a la solución.

FUNCIONAMIENTO

Botón de Refrescar

Gráfico

Resumen

Menú

PANTALLA DE CARGA

Desplegada al iniciar la aplicación


PANTALLA DE INICIO

Desplegada al iniciar la aplicación


Con un botón de refrescar para actualizar la página
El gráfico y resumen, que muestran los registros
mensuales existentes
El menú tiene las opciones para cambiar de pantalla
PANTALLA DE CATEGORÍAS

Categoría
Editar/Eliminar

Modulo desplegado para añadir una


categoría, en el que se valida que no
este vacío
Añadir Categoría

Pantalla para administrar las


categorías existentes y crear nuevas

Otras validaciones tomadas en cuenta:

No se pueden eliminar las Confirmación de categoría Confirmar la eliminación de


categorías si tienen gastos creada una categoría
asociados
PANTALLA DE GASTOS

Gasto
Editar/Eliminar

Modulo desplegado para añadir un


gasto, en el que se valida que no este
vacío ningún campo

Añadir Gasto

Otras validaciones tomadas en cuenta:

Validaciones para para que los Confirmación de Confirmación de Confirmación de


campos no esten vacíos gasto creado eliminar gasto gasto eliminado
VIDEO EXPLICATIVO

Enlace para el video explicativo:


https://drive.google.com/file/d/1pq8fS9ciPLNOyzHZRmAkBfEccKW_y8Pu/vie
w?usp=sharing

REPOSITORIO REMOTO

Enlace del repositorio remoto que aloja el proyecto, cuya rama principal es
developv2:
https://github.com/Lpsv1/DAM_grupo_14_App_gastos/tree/developv2

También podría gustarte