Objetivo:
Replicar 5 pantallas de una aplicación instalada en tu dispositivo, implementando temas y navegación con Go Router y Riverpod.
Requisitos previos:
- Conocimientos básicos de Flutter y Dart
- Flutter SDK instalado
- Un editor de código (preferiblemente Android Studio o VS Code)
- Un emulador o dispositivo físico para pruebas
Selección de la aplicación
- Elige una app instalada en tu dispositivo
- Identifica 3 pantallas distintas para replicar
Configuración del proyecto
- Crea un nuevo proyecto Flutter
- Configura las dependencias necesarias en pubspec.yaml
- Necesitaremos las dependencias necesarias para Riverpod y Go Router
- En la carpeta lib necesitamos una carpeta src y config
- En src tendremos una carpeta para domain, infrastructure, presentation
Implementación de pantallas
- Recrea la estructura básica de cada pantalla
- Implementa los widgets necesarios para replicar la interfaz
- Asegúrate de que el diseño sea responsive
Tema de la app
- Crea los archivo app_theme.dart y theme_providers.dart
- Define colores, estilos de texto y temas para modo claro y oscuro
- Implementa un switch para cambiar entre temas
- Asegurate de usar una de las pantallas para las configuraciones como la del tema
Navegación con Go Router
- Define las rutas para las 3 pantallas
- Implementa la navegación entre pantallas usando Go Router
Refinamiento y pruebas
- Ajusta los detalles de diseño para que sean lo más fieles posible al original
- Realiza pruebas en diferentes tamaños de pantalla y orientaciones
- Verifica que la navegación y el cambio de tema funcionen correctamente
Consejos:
- Utiliza herramientas de inspección de diseño para obtener colores y medidas precisas
- Aprovecha los widgets preexistentes de Flutter para agilizar el desarrollo
- No te preocupes por replicar funcionalidades complejas; enfócate en la interfaz y la navegación