spectrum_seekbar

A Flutter seekbar that renders rounded vertical bars as either a complete-track waveform or a live spectrum.

The important architecture

The package never plays audio, decodes files, runs FFT, or invents a playback clock. The host application remains responsible for the actual audio player and audio-analysis source.

In liveSpectrum mode, every visible bar is derived from the current supplied frame. The values waveform timeline is ignored. Progress is rendered independently as the seek position.

Install

flutter pub add spectrum_seekbar

Waveform mode

// Wrap in SizedBox to set the width and height.
SizedBox(
  width: double.infinity,
  height: 32,
  child: SpectrumSeekBar.waveform(
    values: waveformData,
    progress: progress,
    position: _position,
    duration: _duration,
    isPlaying: _isPlaying,
    smoothing: const SpectrumSmoothing(
      attack: 0.7,
      release: 0.25
    ),
    animationDuration: const Duration(milliseconds: 16),
    style: SpectrumSeekBarStyle(
      playedColor: Color(0xFF8765FF),
      unplayedColor: Color(0xFFC2c2c2),
      barWidth: 3.0,
      barSpacing: 2.0,
      minBarHeight: 6,
      mirror: true,
      barRadius: 999.0,
      progressIndicator: ProgressIndicatorStyle.lineAndDot,
      progressIndicatorColor: Color(0xFF8765FF),
      progressIndicatorWidth: 2,
    ),
    onSeek: (details) {
      final position = details.position;
      if (position != null) {
        player.seek(position);
      }
    },
  ),
);

values are normalized amplitude samples for the entire track.

Live spectrum mode

// Wrap in SizedBox to set the width and height.
SizedBox(
  width: double.infinity,
  height: 32,
  child: SpectrumSeekBar.live(
    spectrumStream: _spectrumController.stream,
    progress: progress,
    position: _position,
    duration: _duration,
    isPlaying: _isPlaying,
    smoothing: const SpectrumSmoothing(
      attack: 0.7,
      release: 0.25
    ),
    animationDuration: const Duration(milliseconds: 16),
    style: SpectrumSeekBarStyle(
      playedColor: Color(0xFF8765FF),
      unplayedColor: Color(0xFFC2c2c2),
      barWidth: 3.0,
      barSpacing: 2.0,
      minBarHeight: 6,
      mirror: true,
      barRadius: 999.0,
      progressIndicator: ProgressIndicatorStyle.none,
    ),
    onSeek: (details) => _seek(details.progress),
  ),
);

Every frame supplied by spectrumStream is resampled across the complete visible bar field. The package smooths transitions between real supplied frames, but never creates spectrum content on its own.

Seeking callbacks

Use onSeek for the common case: it fires when a tap, drag, or accessibility seek commits. Use onSeekStart, onSeekUpdate, and onSeekEnd when you want live scrubbing UI.

SpectrumSeekBar.waveform(
  values: waveformData,
  duration: duration,
  position: position,
  onSeek: (details) {
    // details.progress is always available.
    // details.position is available when duration is provided.
    audioPlayer.seek(details.position!);
  },
);

SDK target

The package targets Flutter 3.44.8 / Dart 3.12.2.

License

MIT.