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(
    mode: SpectrumSeekBarMode.waveform,
    values: waveform_data,
    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,
    ),
    onChangeEnd: _seek,
  ),
);

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(
    mode: SpectrumSeekBarMode.liveSpectrum,
    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,
    ),
    onChangeEnd: _seek,
  ),
);

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.

SDK target

The package targets Flutter 3.44.8 / Dart 3.12.2.

License

MIT.