ambient_backdrop_glow #

✨ Why ambient_backdrop_glow? #

Most ambient lighting implementations in Flutter suffer from two major problems:

1. The Muddy Gray Midtone Problem: Naive RGB/sRGB color cross-fading produces desaturated, dirty gray transitions when switching between complementary artwork colors (e.g. pink to cyan). ambient_backdrop_glow uses the OKLab color space to ensure smooth, constant perceived lightness and chromatic vibrancy.
2. UI Thread Jank: Extracting color histograms from high-resolution images often drops frames. AmbientColorExtractor automatically downsamples onto offscreen buffers and quantizes colors in under 4ms with zero frame drops.

🚀 Features #

• 🎵 4 Ambient Glow Modes:
  • AmbientGlowMode.mesh — Multi-point fluid harmonic mesh gradient (Apple Music & modern media player style).
  • AmbientGlowMode.radial — Focused top-weighted or centered glow.
  • AmbientGlowMode.aurora — Dual-wave atmospheric light flow.
  • AmbientGlowMode.spotlight — Direct backlight centered behind product/album cards.
• 🎨 Automatic Palette Extraction: Pass any ImageProvider (Network, Asset, Memory, File) and the dominant, vibrant, and secondary colors are extracted automatically.
• 🌈 Perceptual OKLab Transitions: Animated cross-fades between tracks or screens blend with rich color saturation rather than dull gray artifacts.
• ⚡ GPU-Accelerated: High-efficiency CustomPainter with hardware Gaussian blur shaders.
• 🌐 All 6 Platforms Supported: 100% pure Dart & Flutter with zero native C/C++ dependencies. Runs on Android, iOS, Web, macOS, Windows, and Linux.

📦 Installation #

Add ambient_backdrop_glow to your pubspec.yaml:

dependencies:
  ambient_backdrop_glow: ^1.1.2

Or run:

flutter pub add ambient_backdrop_glow

💡 Quick Start #

1. Dynamic Glow from Album Artwork (Network / Asset Image) #

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

class MusicPlayerScreen extends StatelessWidget {
  final String albumArtUrl = 'https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17';

  const MusicPlayerScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmbientBackdropGlow(
        image: NetworkImage(albumArtUrl),
        mode: AmbientGlowMode.mesh,
        style: const AmbientGlowStyle(
          blurSigma: 50.0,
          intensity: 0.85,
          speed: 1.0,
        ),
        child: SafeArea(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Image.network(albumArtUrl, width: 280, height: 280, fit: BoxFit.cover),
                ),
                const SizedBox(height: 24),
                const Text(
                  'Midnight Reverie',
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
                ),
                const Text(
                  'Solaris Duo',
                  style: TextStyle(fontSize: 14, color: Colors.white70),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2. Custom Neon Palette Backdrop #

AmbientBackdropGlow(
  colors: const [
    Color(0xFF6366F1), // Indigo
    Color(0xFFEC4899), // Pink
    Color(0xFF06B6D4), // Cyan
  ],
  mode: AmbientGlowMode.aurora,
  style: const AmbientGlowStyle(
    blurSigma: 60.0,
    intensity: 0.9,
  ),
  child: YourContentWidget(),
)

🛠️ API Reference #

AmbientBackdropGlow Properties #

💖 Support the Project #

If you find this project useful, consider supporting its active maintenance and future development:

📄 License #

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Maintained with ❤️ by Govind Tank.