Fondo animado en Flutter

Fondos animados para Flutter se extiende fácilmente para pintar lo que quieras en el lienzo. En este artículo vamos a hacer un fondo animado con burbujas. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Instalando 

Agregue la dependencia en el archivo pubspec.yaml .

dependencies:
 animated_background: ^2.0.0

Sintaxis de uso

Creación de opciones de partículas:

// Defining Particles for animation.
ParticleOptions particles = const ParticleOptions(
    baseColor: Colors.cyan,
    spawnOpacity: 0.0,
    opacityChangeRate: 0.25,
    minOpacity: 0.1,
    maxOpacity: 0.4,
    particleCount: 70,
    spawnMaxRadius: 15.0,
    spawnMaxSpeed: 100.0,
    spawnMinSpeed: 30,
    spawnMinRadius: 7.0,
  );

Agregar widget al cuerpo:

// AnimatedBackground widget
AnimatedBackground(
          vsync: this,
          behaviour: RandomParticleBehaviour(options: particles),
          child: Center(
              child: Text(
            "Hello this is Random Animated Background",
            style: TextStyle(fontSize: 50),
          )),
        ),

Ejemplo de código

import 'package:animated_background/animated_background.dart';
import 'package:flutter/material.dart';
  
// main class calling to 
// the MyAnimatedBackground.
void main() {
  runApp(MyAnimatedBackground());
}
  
// MyAnimatedBackground class is stateful class.
class MyAnimatedBackground extends StatefulWidget {
  MyAnimatedBackground({Key? key}) : super(key: key);
  
  @override
  State<MyAnimatedBackground> createState() => _MyAnimatedBackgroundState();
}
  
class _MyAnimatedBackgroundState extends State<MyAnimatedBackground>
    with SingleTickerProviderStateMixin {
  // defination of ParticlesOptions.
  ParticleOptions particles = const ParticleOptions(
    baseColor: Colors.cyan,
    spawnOpacity: 0.0,
    opacityChangeRate: 0.25,
    minOpacity: 0.1,
    maxOpacity: 0.4,
    particleCount: 70,
    spawnMaxRadius: 15.0,
    spawnMaxSpeed: 100.0,
    spawnMinSpeed: 30,
    spawnMinRadius: 7.0,
  );
  @override
  Widget build(BuildContext context) {
    // return MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Animated Background"),
        ),
        // In body we have a AnimatedBackgound,
        // behavior RandomParticleBehaviour.
        body: AnimatedBackground(
          // vsync uses singleTicketProvider state mixin.
          vsync: this, 
          behaviour: RandomParticleBehaviour(options: particles),
          child: Center(
              child: Text(
            // center text
            "Hello this is Random Animated Background", 
            style: TextStyle(fontSize: 50),
          )),
        ),
      ),
    );
  }
}

Explicación

• main es el método principal utilizado para ejecutar MyAnimatedBackground Class al inicio.
• La creación de Class MyAnimatedBackground es un widget con estado.
• Creación de partículas variables de ParticleOptions con opciones dadas.
• Como flutter se basa en widgets, necesitamos crear uno.
• Volviendo MaterialApp que lleva como andamio a casa que permite utilizar el cuerpo y la apariencia.
• Como un cuerpo tomando Fondo Animado que toma Comportamiento la partícula que hemos creado,
• Vsync para reproducir Animación y teniendo como centro infantil.
• El Centro tiene un widget de texto con texto.

Producción