🎬 Flutter Tutorial con Animaciones Lottie

Un sistema completo de tutorial/onboarding para aplicaciones Flutter con animaciones Lottie interactivas. Perfecto para mostrar las características de tu app de manera visual y atractiva.

Demo

✨ Características Principales

✅ 7 pantallas de tutorial pre-configuradas
✅ 35+ animaciones Lottie incluidas
✅ Interactividad completa (hover effects)
✅ Diseño responsive y adaptable
✅ Código modular y fácil de personalizar
✅ Soporte multiplataforma (Android, iOS, Web)
✅ Licencia MIT - Uso libre y gratuito

🚀 Comenzando Rápidamente

1. Requisitos Previos

flutter --version  # Flutter 3.19 o superior
dart --version     # Dart 3.3 o superior

2. Instalación

# En tu pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  lottie: ^3.3.2  # Animaciones Lottie

3. Configuración de Assets

flutter:
  assets:
    - assets/lottie/

4. Uso Básico

import 'package:flutter/material.dart';
import 'tutorial/TutorialScreen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TutorialScreen(
        onCompleted: () {
          // Navega a tu pantalla principal
        },
        showSkipButton: true,
      ),
    );
  }
}

🏗️ Estructura del Proyecto

lib/
├── core/
│   └── utils/
│       ├── AppColors.dart      # 🎨 Paleta de colores
│       └── Lotties.dart        # 📁 Rutas de animaciones
├── widget/
│   └── HoverLottieAnimation.dart # 🖱️ Widget interactivo
└── tutorial/
    ├── data_tutorial.dart  # 📋 Contenido del tutorial
    └── TutorialPage.dart # 🖼️ Pantalla principal
    

🖱️ Widget Interactivo

HoverLottieAnimation

HoverLottieAnimation(
  assetPath: LottieAssets.chat(),  // Animación a mostrar
  width: 300,
  height: 300,
  onHover: () {
    // Acción personalizada al hacer hover
  },
)

Características:

• ▶️ Animación inicial automática
• 🔄 Replay al hacer hover
• 🛡️ Manejo seguro con mounted checks
• 🗑️ Liberación correcta de recursos

📦 Personalización

1. Modificar Contenido

// En data_tutorial.dart
TutorialData(
  lottieAnimation: LottieAssets.yourAnimation(),
  title: "Tu Título Personalizado",
  description: "Descripción detallada\nde tu funcionalidad",
  backgroundColor: Colors.blue.withOpacity(0.1),
),

2. Agregar Nuevas Animaciones

1. Descarga el archivo .json de Lottie
2. Colócalo en assets/lottie/
3. Agrega referencia en Lotties.dart:

static String tuAnimacion() => '${_basePath}tu-animacion.json';

3. Cambiar Colores

// En AppColors.dart
class AppColors {
  static const Color background = Color(0xFFF8F9FA);
  static const Color accent = Color(0xFF007AFF);
  static const Color textPrimary = Color(0xFF1C1C1E);
  // Personaliza según tu branding
}

🎯 ¿Dónde Conseguir Animaciones Lottie?

🏆 Mejores Plataformas Gratuitas

Plataforma	Animaciones Gratis	Formato	Destacado
LottieFiles	800,000+	.json	Mayor colección
Lordicon	Limitado (39,500+ premium)	.json	Calidad premium
IconScout	Cientos	.json	Plugins integrados
Icons8	2,000+	.json	Categorizadas
Creattie	Colecciones temáticas	.json	Diseño profesional

🔍 Enlaces Directos

1. LottieFiles Community - Busca "flutter", "onboarding", "tutorial"
2. Lordicon Free Icons - Icons animados gratuitos
3. IconScout Lottie - Filtra por "Free"
4. Icons8 Lottie - 2,000+ animaciones gratis

💡 Tips para Elegir Animaciones

1. Tamaño: Prefiere archivos < 500KB
2. Estilo: Mantén consistencia visual
3. Colores: Animaciones editables son mejores
4. Licencia: Verifica uso comercial gratuito
5. Rendimiento: Prueba en dispositivos antiguos

🛠️ Solución de Problemas

❌ Error: "FrameRate.max no existe"

// ❌ INCORRECTO
frameRate: FrameRate.max,

// ✅ CORRECTO
frameRate: const FrameRate(60),  // O elimina esta línea

❌ Error: "Navigator operation requested..."

Problema: El context no tiene un Navigator como ancestro. Solución: Usa un widget separado o Builder:

// ✅ Solución con Builder
Builder(
  builder: (BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(context, ...); // Ahora funciona
      },
    );
  },
)

⚡ Optimización de Rendimiento

Lottie.asset(
  'assets/animation.json',
  renderCache: true,  // ✅ Reduce CPU/GPU usage
  frameRate: const FrameRate(30),  // ✅ 30 FPS para animaciones simples
)

📱 Demo en Acción

Para probar el tutorial inmediatamente:

# Clona el repositorio
git clone https://github.com/tu-usuario/flutter-tutorial-lottie.git

# Navega al directorio
cd flutter-tutorial-lottie

# Instala dependencias
flutter pub get

# Ejecuta en tu dispositivo preferido
flutter run

🤝 Contribuir

¡Contribuciones son bienvenidas!

1. Fork el repositorio
2. Crea una rama (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Añade nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

🎨 Agregar Nuevas Animaciones

1. Sube archivos .json a assets/lottie/
2. Actualiza Lotties.dart con nuevas referencias
3. Añade ejemplos en data_tutorial.dart

📄 Licencia

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

MIT License © 2024

Permisos:
✅ Uso comercial
✅ Modificación
✅ Distribución
✅ Uso privado

Restricciones:
❌ Responsabilidad
❌ Garantía

🔗 Recursos Útiles

• Documentación Oficial de Lottie para Flutter
• Ejemplos de Animaciones Lottie
• Guía de Mejores Prácticas en Flutter
• Comunidad Flutter en Español

📞 Soporte

¿Encontraste un error o tienes una pregunta?

1. Issues: Reportar un problema
2. Discusiones: Foro de la comunidad
3. Contacto: andyclmentegago@gmail.com

---

⭐ Si este proyecto te fue útil, ¡dale una estrella en GitHub!

"Las mejores aplicaciones no solo funcionan bien, sino que también se explican bien."