插件详情v1.2.0

waveform_flutter

在您的 Flutter 应用中构建高度可定制且美观的动画波形

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 4.7万
喜欢数: 87
Pub 分数: 150

安装插件

flutter pub add waveform_flutter

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Waveform Flutter 是一个可自定义且视觉效果出色的包，用于在 Flutter 应用中创建动画波形。它使开发者能够以流畅的动画显示实时音频可视化效果，支持多种波形样式和自定义选项，如颜色、粗细和动画速度。适用于音乐播放器、音频编辑器和声音可视化应用，可在 Android、iOS、Web、macOS、Windows 和 Linux 等所有主要平台上运行。该包与 Flutter 的小部件系统无缝集成，并提供直观的 API 来渲染动态音频波形。

适合场景

音乐播放器界面
音频可视化工具
实时声音监控
互动音频应用
现场表演展示

主要特点

高度可定制的外观
平滑的动画波形
跨平台支持
实时音频渲染
可配置的颜色和线宽

适合对象

音频应用开发者
专注于音乐应用的UI设计师
跨平台音频项目
需要实时波形显示的应用程序

使用建议

需要音频数据输入以进行动画
性能可能因高分辨率波形而有所不同
有限的内置音频处理
最适合具有活跃音频流的应用程序

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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,
    ),
  );
}