flutter_animated_bubble_background 0.0.2

A Flutter package that provides an animated background widget with floating bubbles and customizable gradient colors. Perfect for creating engaging and beautiful app backgrounds.

🌊 Flutter Animated Bubble Background

Un paquete Flutter que crea fondos animados espectaculares con burbujas flotantes y degradados personalizables

🚀 Instalación • 📱 Uso • 🎨 Ejemplos • 📖 API • 🔧 Ejemplo Completo

---

🎬 Demo en Vivo

Burbujas que flotan, rebotan y brillan con física realista

✨ Características

🎨	Degradados Personalizables Crea fondos únicos con gradientes de múltiples colores
🫧	Burbujas Realistas Burbujas que flotan con física natural y efectos de brillo
🏓	Física de Rebote Las burbujas rebotan naturalmente al tocar los bordes
⚙️	Altamente Configurable Controla cantidad, tamaño, velocidad y colores
📱	Optimizado para Móviles Rendimiento fluido en todas las plataformas
�	Efectos Visuales Brillos realistas y transparencias suaves

🚀 Instalación

📦 Desde pub.dev

dependencies:
  flutter_animated_bubble_background: ^0.0.2

🔧 Comandos de instalación

# Instalar el paquete
flutter pub add flutter_animated_bubble_background

# O manualmente
flutter pub get

📱 Importar en tu proyecto

import 'package:flutter_animated_bubble_background/flutter_animated_bubble_background.dart';

💻 Uso Básico

🎯 Implementación Minimalista

import 'package:flutter/material.dart';
import 'package:flutter_animated_bubble_background/flutter_animated_bubble_background.dart';

class MiPantalla extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBubbleBackground(
        // 🌈 Define tu gradiente personalizado
        gradientColors: [
          Colors.blue,
          Colors.purple,
          Colors.pink,
        ],
        child: Center(
          child: Text(
            '¡Hola Mundo! 👋',
            style: TextStyle(
              fontSize: 28,
              color: Colors.white,
              fontWeight: FontWeight.bold,
              shadows: [
                Shadow(
                  offset: Offset(0, 2),
                  blurRadius: 4,
                  color: Colors.black26,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

🔥 Configuración Avanzada

AnimatedBubbleBackground(
  // 🎨 Gradiente personalizado
  gradientColors: [
    Colors.deepPurple,
    Colors.indigo,
    Colors.blue,
    Colors.teal,
  ],
  
  // 🫧 Configuración de burbujas
  bubbleCount: 30,           // Cantidad de burbujas
  minBubbleSize: 15.0,       // Tamaño mínimo
  maxBubbleSize: 50.0,       // Tamaño máximo
  
  // ⚡ Animación y física
  speed: 1.5,                // Velocidad de movimiento
  
  // 🎭 Estilo visual
  bubbleColor: Colors.white,     // Color base
  bubbleOpacity: 180,            // Transparencia (0-255)
  minCircleBubbleColor: Colors.lightBlueAccent,
  
  child: TuContenidoAqui(),
)

🎨 Galería Visual

🌟 Ejemplo de temas

🌌 Galaxia Violeta Entertainment • Gaming	🌅 Atardecer Tropical Travel • Photography	🌊 Océano Profundo Health • Meditation
🌲 Bosque Místico Nature • Eco-Friendly	💙 Elegante Básico Corporate • Business	✨ Tu Diseño ¡Personalízalo!

📖 API Completa

🔧 Parámetros de Configuración

Parámetro	Tipo	Default	Descripción	Rango
gradientColors	List<Color>	Requerido	Colores del degradado de fondo	2-5 colores
bubbleCount	int	20	Número total de burbujas	10-50
minBubbleSize	double	10.0	Tamaño mínimo de burbujas	5.0-30.0
maxBubbleSize	double	40.0	Tamaño máximo de burbujas	20.0-100.0
speed	double	1.0	Velocidad de animación	0.1-3.0
bubbleColor	Color	Colors.white	Color base de las burbujas	Cualquier Color
bubbleOpacity	int	76	Transparencia (0-255)	50-200
minCircleBubbleColor	Color	Colors.white	Color de burbujas pequeñas	Cualquier Color
child	Widget?	null	Contenido sobre el fondo	-

🚀 Casos de Uso

📱 Pantalla de Bienvenida

AnimatedBubbleBackground(
  gradientColors: [Colors.orange, Colors.red, Colors.pink],
  bubbleCount: 25,
  speed: 1.2,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, size: 100, color: Colors.white),
      SizedBox(height: 20),
      Text(
        'Bienvenido a MiApp',
        style: TextStyle(fontSize: 30, color: Colors.white, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 10),
      Text(
        'Descubre algo increíble',
        style: TextStyle(fontSize: 16, color: Colors.white70),
      ),
    ],
  ),
)

⏳ Pantalla de Carga

AnimatedBubbleBackground(
  gradientColors: [Colors.green, Colors.lightGreen, Colors.teal],
  bubbleCount: 15,
  speed: 0.8,
  bubbleOpacity: 100,
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CircularProgressIndicator(
          color: Colors.white,
          strokeWidth: 3,
        ),
        SizedBox(height: 20),
        Text(
          'Cargando...',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ],
    ),
  ),
)

🎮 Fondo de Gaming

AnimatedBubbleBackground(
  gradientColors: [
    Colors.deepPurple,
    Colors.purple,
    Colors.pinkAccent,
    Colors.cyan,
  ],
  bubbleCount: 40,
  speed: 2.0,
  minBubbleSize: 8.0,
  maxBubbleSize: 60.0,
  bubbleOpacity: 150,
  child: GameContent(),
)

🧘 App de Meditación

AnimatedBubbleBackground(
  gradientColors: [
    Colors.indigo,
    Colors.blue.shade300,
    Colors.lightBlue.shade200,
  ],
  bubbleCount: 12,
  speed: 0.4,
  minBubbleSize: 20.0,
  maxBubbleSize: 45.0,
  bubbleOpacity: 80,
  child: MeditationUI(),
)

📱 Plataformas Soportadas

Plataforma	Estado	Versión Mínima
📱 Android	✅ Completo	API 16+
🍎 iOS	✅ Completo	iOS 9.0+
🌐 Web	✅ Completo	Cualquiera
🖥️ Windows	✅ Completo	Windows 10+
🍎 macOS	✅ Completo	macOS 10.14+
🐧 Linux	✅ Completo	Cualquiera

🔧 Ejemplo Completo

¿Quieres ver el widget en acción? Revisa nuestro ejemplo completo que incluye:

• 🎨 5 temas predefinidos con diferentes configuraciones
• 🎮 Interfaz interactiva para cambiar parámetros en tiempo real
• 📊 Métricas de rendimiento para optimizar tu implementación
• 💡 Mejores prácticas y casos de uso recomendados

# Ejecutar el ejemplo
cd example
flutter run

🤝 Contribuir

¡Las contribuciones son bienvenidas! 🎉

🌟 Cómo contribuir

1. 🍴 Fork el repositorio
2. 🌿 Crea una rama para tu feature: git checkout -b feature/nueva-funcionalidad
3. 💾 Commit tus cambios: git commit -m 'Añadir nueva funcionalidad'
4. 📤 Push a la rama: git push origin feature/nueva-funcionalidad
5. 🎯 Abre un Pull Request

🐛 Reportar Bugs

Si encuentras un bug, por favor abre un issue con:

• 📱 Plataforma y versión de Flutter
• 🔍 Descripción detallada del problema
• 📋 Pasos para reproducir
• 📸 Capturas de pantalla (si es aplicable)

📄 Licencia

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

MIT License - Copyright (c) 2025 Gian Sandoval

---

⭐ ¿Te gustó el paquete?

Si Flutter Animated Bubble Background te fue útil, considera:

• ⭐ Darle una estrella al repositorio
• 🐦 Compartirlo en redes sociales
• 📝 Escribir una reseña en pub.dev
• 🤝 Contribuir al proyecto

Hecho con ❤️ para la comunidad Flutter

🔝 Volver arriba