waveform_flutter 1.0.0 copy "waveform_flutter: ^1.0.0" to clipboard
waveform_flutter: ^1.0.0 copied to clipboard

Build animated waveforms in your Flutter app

WaveForm #

WaveForm is a Flutter package that helps you build animated waveforms in your Flutter app. With the popularity of voice-based chat UIs rising, WaveForm provides an easy and efficient way to visualize audio waveforms. Inspired by WaveSurfer.js, WaveForm offers a range of features to integrate beautiful and functional waveforms into your Flutter applications.

Demo

Features #

  • Stream-based Waveform Generation: Create real-time waveforms from a stream of amplitude data.
  • Customizable Bars: Adjust the appearance of waveform bars, including color and maximum height.
  • Animated Lists: Use animated lists to smoothly display new waveform data.
  • Flexible Integration: Easily integrate with other Flutter widgets and packages.

Important 🚨 #

Please note that this package does not provide a connection to an audio source (like microphone). I recommend using record to connect this package to a live stream of audio.

Installation #

Add the following to your pubspec.yaml file:

dependencies:
  waveform: latest_version

Then run flutter pub get to install the package.

Usage #

Basic Example #

Below is an example of how to use WaveForm to display an animated waveform:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WaveForm Example')),
        body: WaveFormExample(),
      ),
    );
  }
}

class WaveFormExample extends StatefulWidget {
  @override
  _WaveFormExampleState createState() => _WaveFormExampleState();
}

class _WaveFormExampleState extends State<WaveFormExample> {
  final Stream<Amplitude> _amplitudeStream = createRandomAmplitudeStream();

  @override
  Widget build(BuildContext context) {
    return AnimatedWaveList(stream: _amplitudeStream);
  }
}

Components #

AnimatedWaveList #

Displays an animated list of waveform bars based on a stream of amplitude values.

const AnimatedWaveList({
  required Stream<Amplitude> stream,
});

WaveformBar #

Represents a single bar in the waveform visualisation.

const WaveFormBar({
  required Amplitude amplitude,
  Animation<double>? animation,
  int maxHeight = 2,
  Color color = Colors.cyan,
});

Helpers #

createRandomAmplitudeStream #

Creates a stream of random amplitude values.

Stream<Amplitude> createRandomAmplitudeStream() {
  return Stream.periodic(
    const Duration(milliseconds: 70),
    (count) => Amplitude(
      current: Random().nextDouble() * 100,
      max: 100,
    ),
  );
}

Contributing #

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License #

WaveForm is licensed under the MIT License. See the LICENSE file for more details.

Credits #

WaveForm is inspired by WaveSurfer.js.

34
likes
0
points
1.47k
downloads

Publisher

unverified uploader

Weekly Downloads

Build animated waveforms in your Flutter app

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on waveform_flutter