Detalhes do pacotev1.2.0

waveform_flutter

Crie formas de onda animadas altamente personalizáveis e bonitas no seu aplicativo Flutter

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 46,7 mil
Curtidas: 87
Pontos Pub: 150

Instalar pacote

flutter pub add waveform_flutter

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Waveform Flutter é um pacote personalizável e visualmente atraente para criar ondas animadas em aplicativos Flutter. Permite aos desenvolvedores exibir visualizações de áudio em tempo real com animações suaves, oferecendo diversos estilos de onda e opções de personalização, como cor, espessura e velocidade de animação. Ideal para players de música, editores de áudio e aplicativos de visualização sonora, funciona em todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. O pacote se integra perfeitamente ao sistema de widgets do Flutter e oferece uma API intuitiva para renderizar ondas de áudio dinâmicas.

Casos de uso

Interfaces de usuário de tocador de música
Ferramentas de visualização de áudio
Monitoramento de som em tempo real
Aplicativos de áudio interativos
Exibições de desempenho ao vivo

Principais recursos

Aparência altamente personalizável
Ondas suaves animadas
Suporte multiplataforma
Renderização de áudio em tempo real
Cores e largura de traço configuráveis

Indicado para

desenvolvedores de aplicativos de áudio
Designers de interface focados em aplicativos musicais
Projetos de áudio multiplataforma
Aplicativos que exigem exibição em tempo real de ondas

Considerações

Requer entrada de dados de áudio para animação
O desempenho pode variar com ondas de alta resolução
Processamento de áudio embutido limitado
Mais adequado para aplicativos com fluxos de áudio ativos

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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_flutter/waveform_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class WaveFormExample extends StatefulWidget {
  const WaveFormExample({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _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,
    ),
  );
}