Índice de contenido
Te mostraré rápidamente cómo puedes crear un fondo vivo o animado empleando Flutter y un sencillo paquete que facilita enormemente esta tarea. Para este ejemplo, estamos utilizando una estructura base sencilla con un StatefulWidget, que es la clase ideal para manejar animaciones, ya que un fondo animado implica cambios constantes en la interfaz.
1. Configuración Inicial y Paquete
Todo comienza con el paquete llamado animated_background. Para utilizarlo, debes agregarlo en tu archivo pubspec.yaml:
dependencies:
animated_background: ^2.0.0 # Verifica la última versión en pub.devEn nuestro Scaffold, dentro del cuerpo (body), utilizaremos la clase principal del paquete: AnimatedBackground. Lo interesante es que este widget envuelve a cualquier otro elemento que quieras mostrar (como un Container o un Text), colocando la animación por debajo.
Estructura básica:
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
// This widget is the root of your application.
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Medidor app 2'),
),
body: ###FONDO ANIMADO###
),
);
}
}En la parte que dice ###FONDO ANIMADO### puedes colocar tu fondo animado según las características que te comento a continuación:
2. Fondo básico
El diseño mas sencillo seria en base a partículas, y luce de la siguiente forma, indicamos la clase AnimatedBackground para indicar que queremos un fondo animado e indicamos el comportamiento que en este primer ejemplo es partículas aleatorias:
AnimatedBackground(
behaviour: RandomParticleBehaviour(),
vsync: this,
child: Text('Hello'),
),Muy pendiente con el vsync: this para indicar que es un recurso animable.
Y con esto:
2.1 Opciones para las partículas
Para la clase anterior, tenemos un objeto que podemos personalizar a nivel de imágenes, velocidad, opacidad, cantidad...
final particleOptions = ParticleOptions(
image: Image.network(
"https://cdn4.iconfinder.com/data/icons/emoji-18/61/3-512.png"),
baseColor: Colors.blue,
spawnOpacity: 0.0,
opacityChangeRate: 0.25,
minOpacity: 0.1,
maxOpacity: 0.4,
spawnMinSpeed: 30.0,
spawnMaxSpeed: 70.0,
spawnMinRadius: 7.0,
spawnMaxRadius: 15.0,
particleCount: 40,
);RandomParticleBehaviour(options: particleOptions),
⚙️ 2.2 Personalización de la Animación
El paquete permite configurar muchísimos aspectos para que el fondo se adapte a tu diseño. A través de la propiedad options, podemos definir variables como:
- Imágenes: Puedes usar iconos o imágenes (como una carita feliz).
- Colores y Opacidad: Definir el color de fondo y el rango de transparencia (mínima y máxima).
- Partículas: Ajustar la cantidad, el tamaño máximo/mínimo y la velocidad de movimiento.
Ten cuidado con la cantidad de partículas. A mayor número, se requiere más procesamiento y el rendimiento del dispositivo podría verse afectado.
2.3 Tipos de Fondos Disponibles
Aparte de las partículas aleatorias, el paquete ofrece otros comportamientos predefinidos que puedes intercambiar fácilmente cambiando la clase en la propiedad behaviour:
- Burbujas (BubblesBehaviour): Genera burbujas que flotan suavemente por la pantalla.
- Líneas Ascendentes (RacingLinesBehaviour): Crea un efecto dinámico de líneas en movimiento.
- Partículas (RandomParticleBehaviour): El que vimos al inicio con puntos o imágenes aleatorias.
Así de fácil es darle vida a tu aplicación con diseños atractivos y profesionales utilizando Flutter y este potente paquete.
Burbujas: BubblesBehaviour():
Lineas: RacingLinesBehaviour():
Conclusiones
Y esto es todo, es un paquete fácil de usar, que nos ofrece un conjunto interesantes de variantes y que por supuesto, podemos personalizar; recuerda no pasarte en el uso de este paquete para evitar problemas de rendimiento.