fluid_background 1.0.5

Create stunning fluid backgrounds with procedure-animated colorful bubbles and built-in blur effects for a dynamic and modern UI

example/lib/main.dart

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

void main() {
  runApp(const FluidBackgroundExampleApp());
}

class FluidBackgroundExampleApp extends StatelessWidget {
  const FluidBackgroundExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatefulWidget {
  const ExampleHomePage({super.key});

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  final controller = FluidBackgroundController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: GestureDetector(
        onTap: () {
          controller.mutateToColors(InitialColors.random(4).colors);
        },
        child: Center(
          child: FluidBackground(
            controller: controller,
            initialColors: InitialColors.random(4),
            initialPositions: InitialOffsets.predefined(),
            velocity: 100,
            bubblesSize: 400,
            sizeChangingRange: const [300, 600],
            allowColorChanging: false,
            bubbleMutationDuration: const Duration(seconds: 4),
            size: const Size(300, 300),
            child: const SizedBox(),
          ),
        ),
      ),
    );
  }
}