Pokédex - Poke API Riverpod

Una aplicación Flutter que consume la PokéAPI para mostrar un catálogo completo de Pokémon con scroll infinito y pantalla de detalle.
Explorar el repositorio »

Reportar un error · Solicitar una característica

Tabla de contenido

1. Acerca del proyecto
2. Primeros pasos
   • Requisitos
   • Instalación
3. Uso
4. Arquitectura
5. Características
6. Roadmap
7. Licencia
8. Contacto

Acerca del Proyecto

Este es un proyecto de demostración que consume la PokéAPI pública para mostrar una lista paginada de Pokémon con un efecto de scroll infinito (similar a redes sociales).

Características Principales

• 📱 Interfaz moderna con Material Design
• 🔄 Scroll infinito para carga progresiva de Pokémon
• 📝 Pantalla de detalle con información completa del Pokémon
• 🏗️ Arquitectura limpia con patrón Feature y repository
• 💉 Inyección de dependencias con Riverpod
• 📡 Gestión de estados con Riverpod
• 🎯 Navegación con GoRouter

(Volver arriba)

Construido Con

• ]Flutter-url
• ]Dart-url
• ]Riverpod-url

Dependencias principales:

• flutter_riverpod: Gestión de estado e inyección de dependencias
• dio: Cliente HTTP para llamadas a la API
• go_router: Navegación declarativa
• riverpod_generator: Generación de código para Riverpod
• fpdart: Programación funcional (Either, Option)

(Volver arriba)

Primeros pasos

A continuación se muestran los pasos para configurar y ejecutar la aplicación.

Requisitos

• Flutter 3.35.3 o superior
• Dart 3.9.2 o superior
• Xcode (para desarrollo en iOS)
• Android Studio o Android SDK (para desarrollo en Android)

Verifica tu versión de Flutter:

flutter --version

Instalación

1. Clona el repositorio

   git clone https://github.com/AngelFlower/poke-api-riverpod.git
   cd poke-api-riverpod

2. Instala las dependencias

   flutter pub get

3. Genera el código necesario con build_runner

   dart run build_runner build

4. Ejecuta la aplicación

   flutter run

Compilación para producción

Para Android:

flutter build apk --release

Para iOS:

flutter build ios --release

(Volver arriba)

Uso

Pantalla principal

La pantalla principal muestra un grid de Pokémon con:

• Imagen del Pokémon
• Nombre y número de Pokédex
• Scroll infinito que carga más Pokémon automáticamente

Pantalla de detalle

Al tocar un Pokémon, accedes a la pantalla de detalle con:

• Imagen ampliada
• Nombre y número
• Altura, peso y experiencia base
• Estadísticas base (HP, Ataque, Defensa, etc.)
• Tipo(s)
• Habilidades

(Volver arriba)

Arquitectura

El proyecto sigue una arquitectura limpia con el patrón Feature-First:

lib/
├── main.dart                 # Punto de entrada
├── core/                     # Código compartido
│   ├── extensions/          # Extensiones de Dart
│   ├── network/             # Configuración HTTP y excepciones
│   ├── paths/               # Rutas y navegación
│   └── providers/           # Proveedores globales
└── features/
    └── pokemon/
        ├── data/            # Fuentes de datos y repositorios
        ├── domain/          # Casos de uso y entidades
        └── presentation/    # Widgets y controladores

Tecnologías, buenas prácticas y arquitectura

• Feature-First para organización modular y escalable del código
• Repository Pattern para abstracción de fuentes de datos
• Riverpod para gestión de estado e inyección de dependencias
• FPDart para manejo funcional de errores
• GoRouter para navegación declarativa

Mejoras futuras y escalabilidad

• ¿Qué mejoraría del proyecto?

  • Mejorar la cobertura de tests unitarios(con mockito) y agregar tests de integración.
  • Soporte para temas (modo oscuro/claro).
  • Refactorizar widgets de la pantalla detalle para mayor reutilización y separación de responsabilidades.
  • Agregar más información en la pantalla de detalle: mostrar evoluciones, galería de sprites, fotos de cada evolución y visualización en pantalla completa.
  • Considerar el uso de Freezed para modelos inmutables, además de eliminar código boilerplate en modelos.

• ¿Cómo lo llevaría a otro nivel?

  • Agregar búsqueda y filtrado avanzado por nombre, tipo, generación, etc.
  • Implementar favoritos y persistencia local.
  • Crear versión web (Flutter Web).
  • Integrar más endpoints y dar soporte a todas las entidades que Pokédex ofrece como features independientes:
    • Berries
    • Contests
    • Encounters
    • Evolution
    • Games
    • Items
    • Locations
    • Machines
    • Moves
  • Ofrecer skins para visualizar la información de manera más fiel al universo Pokémon

• Estimación de tiempo de desarrollo

  • Implementación de favoritos y persistencia: 1 dia.
  • Búsqueda y filtrado avanzado: 2-3 días.
  • Versión web/escritorio: 1 semana.
  • Integración de nuevos endpoints y features de Pokédex: 1-2 semanas.
  • Skins y tema oscuro: 2-5 días.

(Volver arriba)

Contacto

Angel Flores - @AngelFlower

Project Link: https://github.com/AngelFlower/poke-api-riverpod

(Volver arriba)