套件詳情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,
    ),
  );
}