🌊 Google Material 3 Expressive Wavy Progress & Interactive Suite for Flutter #

A pixel-perfect, production-ready Flutter library implementing Google's Material 3 Expressive (M3E) loading indicators, sinusoidal wavy progress bars, geometric liquid tanks, multi-segment story loaders, audio visualizers, and interactive squiggly sliders.

📸 Visual Showcase #

✨ Features Overview #

🚀 Installation #

Add expressive_wavy_progress to your pubspec.yaml:

dependencies:
  expressive_wavy_progress: ^1.0.0

Import the package:

import 'package:expressive_wavy_progress/expressive_wavy_progress.dart';

📖 Component Catalog & Code Examples #

1. Linear Wavy Progress Indicator #

// Google Signature 4-Color Determinate Bar
GoogleLinearWavyProgressIndicator.googleColors(
  value: 0.65,
  minHeight: 20.0,
  strokeWidth: 4.5,
  wavelength: 28.0,
  amplitude: 4.0,
)

// Gemini AI Glowing Iridescent Traveling Wave with AI Sparkles
GoogleWavyParticleOverlay(
  isEmitting: true,
  child: GoogleLinearWavyProgressIndicator.gemini(
    value: 0.85,
    glowRadius: 6.0,
    glowColor: const Color(0xFF9C27B0),
  ),
)

2. Circular Wavy Progress Indicator #

// Google 4-Color Circular Undulation
GoogleCircularWavyProgressIndicator.googleColors(
  value: 0.70, // or null for indeterminate rotating sweep
  size: 64.0,
  strokeWidth: 5.0,
  waveCount: 8,
  amplitude: 3.5,
)

3. Liquid Wave Fluid Containers #

// Pixel Battery Cell Liquid Fill
GoogleLiquidWaveIndicator.battery(
  value: 0.78,
  width: 80,
  height: 130,
  center: Text(
    '78%',
    style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
  ),
)

// Gemini AI Droplet Tank
GoogleLiquidWaveIndicator.gemini(
  value: 0.55,
  shape: LiquidShape.droplet,
  width: 110,
  height: 130,
)

4. Segmented Story Progress Indicator #

GoogleSegmentedWavyProgressIndicator.googleColors(
  segmentCount: 4,
  currentIndex: 1,
  currentSegmentProgress: 0.60,
  strokeWidth: 4.5,
  waveAmplitude: 3.5,
  segmentGap: 8.0,
)

5. Pixel Squiggly Media Scrubbers (Horizontal & Vertical) #

// Horizontal YouTube Music / Pixel Scrubber
GoogleWavySlider.googleColors(
  value: currentPosition,
  min: 0.0,
  max: totalDuration,
  isPlaying: isMusicPlaying,
  onChanged: (pos) => seekTo(pos),
)

// Vertical Volume / Brightness Slider
GoogleVerticalWavySlider.googleColors(
  value: volumeLevel,
  min: 0.0,
  max: 1.0,
  topIcon: Icon(Icons.volume_up_rounded),
  bottomIcon: Icon(Icons.volume_mute_rounded),
  onChanged: (v) => setVolume(v),
)

6. Gemini Live Voice & Audio Waveform Visualizer #

GoogleAudioReactiveWave.geminiVoice(
  height: 100,
  amplitudeStream: microphoneAmplitudeStream, // or auto-simulated
  isSimulating: true,
)

7. Expressive Shape-Morphing Spinner #

// Filled Google 4-Color Shape Morphing
GoogleExpressiveMorphingIndicator.filled(
  size: 56.0,
)

// Outlined Stroke Morphing
GoogleExpressiveMorphingIndicator.outlined(
  size: 56.0,
  strokeWidth: 4.0,
)

8. Wavy Shimmer Skeleton Placeholder #

GoogleWavySkeletonCard(
  hasAvatar: true,
  lineCount: 3,
  hasMediaThumbnail: true,
)

🎨 Palette Customization #

Use pre-defined Google palettes or customize with any ColorScheme:

GoogleWavyColors.googleColors       // Blue, Red, Yellow, Green
GoogleWavyColors.geminiAura         // Iridescent AI Multi-Hue
GoogleWavyColors.pixelOcean         // Tonal Blue Palette
GoogleWavyColors.pixelSunset        // Warm Orange Palette

📄 License #

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