Clima MVVM - Aplicación de Clima con Patrón MVVM en Flutter

📱 Descripción

Aplicación de ejemplo que muestra el clima actual utilizando el patrón de arquitectura MVVM (Model-View-ViewModel) en Flutter. Esta aplicación obtiene datos meteorológicos de Open-Meteo API y los muestra en una interfaz limpia y responsiva.

🏗️ Estructura del Proyecto

📂 lib/src/

La carpeta src/ contiene todo el código fuente de la aplicación, organizado siguiendo el patrón MVVM:

1. 📁 config/

• di/: Configuración de inyección de dependencias
  • service_locator.dart: Configuración de GetIt para la inyección de dependencias

2. 📁 data/

• interfaces/: Contratos/interfaces para los repositorios
  • weather_repository_interface.dart: Interfaz que define el contrato para el repositorio de clima
• models/: Modelos de datos
  • weather.dart: Modelo principal de datos meteorológicos
  • current_weather.dart: Modelo para los datos del clima actual
• network/: Implementaciones de fuentes de datos
  • weather_repository_implement.dart: Implementación concreta del repositorio de clima que maneja la obtención de datos

3. 📁 ui/

• enums/: Enumeraciones
  • status.dart: Estados de la UI (loading, success, error)
• screens/weather/: Pantallas de la aplicación
  • weather_screen.dart: Vista principal (View)
  • weather_viewmodel.dart: ViewModel que maneja la lógica de presentación
  • weather_uistate.dart: Estado de la UI manejado por el ViewModel

🏛️ Arquitectura MVVM

Model

• Responsabilidad:
  • Modelos de Datos: Representan las estructuras de datos de la aplicación
  • Repositorios: Manejan el acceso a los datos, ya sea desde API, base de datos local, etc.
• Ubicación:
  • Modelos: lib/src/data/models/
  • Repositorios: lib/src/data/network/ (implementación) y lib/src/data/interfaces/ (interfaces)
• Ejemplos:
  • weather.dart - Modelo de datos
  • weather_repository_interface.dart - Contrato del repositorio
  • weather_repository_implement.dart - Implementación del repositorio

View

• Responsabilidad: Mostrar la interfaz de usuario y capturar interacciones
• Ubicación: lib/src/ui/screens/
• Ejemplo: weather_screen.dart

ViewModel

• Responsabilidad:
  • Actuar como intermediario entre la View y el Model
  • Mantener el estado de la UI
  • Contener la lógica de presentación
• Ubicación: lib/src/ui/screens/weather/
• Ejemplo:
  • weather_viewmodel.dart - Lógica de presentación
  • weather_uistate.dart - Estado de la UI

🛠️ Configuración

1. Dependencias principales:

   provider: ^6.0.5
   dio: ^5.0.0
   get_it: ^7.6.0

2. Configuración:

   • La URL base de la API está configurada en service_locator.dart
   • Los timeouts están configurados a 10 segundos

🚀 Cómo ejecutar

1. Clona el repositorio
2. Ejecuta flutter pub get para instalar las dependencias
3. Ejecuta la aplicación con flutter run

🧠 Conceptos Clave MVVM

Separación de Responsabilidades

• Modelos: Solo contienen datos y validaciones básicas
• Repositorios: Manejan el acceso a los datos, ocultando la fuente de datos subyacente
• ViewModels: Contienen la lógica de presentación y estado
• Vistas: Solo se encargan de mostrar datos y capturar interacciones

Beneficios de esta Estructura

• Testabilidad: Cada componente puede ser probado de forma aislada
• Mantenibilidad: Cambios en la UI no afectan la lógica de negocio
• Escalabilidad: Fácil de extender con nuevas funcionalidades

📚 Aprendizaje MVVM

Este proyecto es un excelente ejemplo para aprender:

1. Separación clara de responsabilidades
2. Inyección de dependencias con GetIt
3. Gestión de estado con Provider
4. Arquitectura limpia y mantenible

📄 Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.