搜索插件、代码仓与 APP 分类

siri_wave 封面
插件详情v2.3.1

siri_wave

一个 Flutter 包,可让您创建视觉效果惊艳的 Siri 风格波形。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
5530
喜欢数
160
Pub 分数
150

安装插件

flutter pub add siri_wave

插件介绍

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

Siri Wave 是一个 Flutter 包,可帮助开发者创建视觉上吸引人的 Siri 风格动画波形。受 Apple Siri 语音动画的启发,它提供了流畅、可自定义的音频可视化效果,并支持跨多个平台的实时波形渲染。该包支持多种波形类型、颜色和动画速度,非常适合语音助手、音乐应用或任何需要动态音频反馈的应用程序。它可轻松集成到 Flutter 项目中,设置简单,并可在 Android、iOS、Web、macOS、Windows 和 Linux 上运行。

适合场景

  • 语音助手界面
  • 音乐播放器可视化
  • 实时音频反馈
  • 交互式应用动画
  • 实时语音识别显示

主要特点

  • Siri风格波形设计
  • 可自定义的波浪颜色和形状
  • 流畅的实时动画
  • 跨平台兼容性
  • 与 Flutter 的简单集成
  • 支持多种音频源

适合对象

  • 移动应用中的音频可视化
  • 支持语音的应用程序
  • 注重设计的 UI 组件
  • 寻求动画效果的Flutter开发者
  • 需要实时音频指示的应用程序

使用建议

  • 性能可能因高频更新而有所不同
  • 超出基本波形属性的自定义功能有限
  • 最适合简单的平滑动画
  • 需要对音频数据流进行正确处理
  • 未针对复杂音频处理进行优化

原始 README

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

ci Package: siri_wave Publisher: halildurmus.dev Language: Dart Platform: Flutter License: BSD-3-Clause

Create visually stunning waveforms similar to those found in Siri.

Inspired from the siriwave library.

Demo

Check out the live demo here.

iOS 7 Siri-style waveform GIF

iOS 7 Siri-style waveform

iOS 9 Siri-style waveform GIF

iOS 9 Siri-style waveform

Usage

iOS 7 Siri-style waveform

To create an iOS 7 Siri-style waveform, use the SiriWaveform.ios7() constructor:

import 'package:siri_wave/siri_wave.dart';

class MyWidget extends StatelessWidget {
  MyWidget({super.key});

  Widget build(BuildContext context) => SiriWaveform.ios7();
}

You can customize the waveform by passing a controller and/or options:

class MyWidget extends StatelessWidget {
  MyWidget({super.key});

  final controller = IOS7SiriWaveformController(
    amplitude: 0.5,
    color: Colors.red,
    frequency: 4,
    speed: 0.15,
  );

  @override
  Widget build(BuildContext context) => SiriWaveform.ios7(
        controller: controller,
        options: const IOS7SiriWaveformOptions(height: 200, width: 400),
      );
}

You can also change the properties of the waveform later:

  controller.amplitude = 0.3;
  controller.color = Colors.white;
iOS 9 Siri-style waveform

To create an iOS 9 Siri-style waveform, use the SiriWaveform.ios9() constructor:

import 'package:siri_wave/siri_wave.dart';

class MyWidget extends StatelessWidget {
  MyWidget({super.key});

  Widget build(BuildContext context) => SiriWaveform.ios9();
}

As with the iOS 7 Siri-style waveform, you can customize the waveform by passing a controller and/or options:

class MyWidget extends StatelessWidget {
  MyWidget({super.key});

  final controller = IOS9SiriWaveformController(
    amplitude: 0.5,
    color1: Colors.red,
    color2: Colors.green,
    color3: Colors.blue,
    speed: 0.15,
  );

  @override
  Widget build(BuildContext context) => SiriWaveform.ios9(
        controller: controller,
        options: const IOS9SiriWaveformOptions(height: 200, width: 400),
      );
}

For a complete sample application, please checkout the example.

To learn more, see the API Documentation.

🤝 Contributing

Contributions, issues and feature requests are welcome. Feel free to check the issue tracker if you want to contribute.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。