Flutter动态波浪效果插件wave_blob的使用

Features

wave_blob插件提供了一个可以自定义的波浪动画效果。您可以根据语音的振幅来播放音频。

Blob Wave Animation

这个包提供了一个可以根据需求定制的波浪动画。你可以通过调整参数来改变动画的效果。

Preview

以下是插件的一个预览图：

Getting Started

Installing

1. 在pubspec.yaml文件中添加依赖：

   dependencies:
     wave_blob: <latest-version>
   

2. 运行flutter pub get命令以安装依赖。

3. 导入包：

   import 'package:wave_blob/wave_blob.dart';
   

Usage

Simple Usage

将Widget包裹在WaveBlob中，并分配必要的参数。

SizedBox(
  width: MediaQuery.sizeOf(context).width * 0.4,
  height: MediaQuery.sizeOf(context).width * 0.4,
  child: WaveBlob(
    child: const Icon(
      Icons.mic,
      color: Colors.white,
      size: 50.0,
    ),
  ),
),

注意：不要忘记设置Widget的宽度和高度。

更多详情请查看example app。

Customization

您可以轻松地自定义blob效果，包括更改blob颜色、动画速度、最小和最大半径等。

示例：

完整示例Demo

以下是一个完整的示例代码，展示了如何使用wave_blob插件创建一个带有可调节振幅和缩放比例的波浪动画效果。

import 'dart:async';

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

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _scale = 1.0;
  double _amplitude = 4250.0;

  bool _autoScale = true;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Timer.periodic(const Duration(milliseconds: 50), (timer) {
        setState(() {});
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blob Wave Animation',
      theme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 27, 34, 42),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Amplitude'),
              SizedBox(
                width: MediaQuery.sizeOf(context).width * 0.8,
                child: Slider(
                  value: _amplitude,
                  activeColor: Colors.blue,
                  inactiveColor: Colors.lightBlueAccent.withOpacity(0.2),
                  min: 0.0,
                  max: 8500.0,
                  onChanged: (v) {
                    setState(() {
                      _amplitude = v;
                    });
                  },
                ),
              ),
              const Text('Scale'),
              SizedBox(
                width: MediaQuery.sizeOf(context).width * 0.8,
                child: Row(
                  children: [
                    Expanded(
                      child: Slider(
                        value: _scale,
                        activeColor: Colors.blue,
                        inactiveColor: Colors.lightBlueAccent.withOpacity(0.2),
                        min: 1.0,
                        max: 1.3,
                        onChanged: (v) {
                          setState(() => _scale = v);
                        },
                      ),
                    ),
                    Checkbox(
                      value: _autoScale,
                      activeColor: Colors.blue,
                      checkColor: Colors.white,
                      onChanged: (v) {
                        setState(() {
                          _autoScale = v!;
                        });
                      },
                    ),
                    const Text('Auto'),
                  ],
                ),
              ),
              const SizedBox(height: 20.0),
              Container(
                width: MediaQuery.sizeOf(context).width * 0.8,
                height: MediaQuery.sizeOf(context).width * 0.8,
                decoration: BoxDecoration(
                  color: Colors.white12,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: WaveBlob(
                  blobCount: 2,
                  amplitude: _amplitude,
                  scale: _scale,
                  autoScale: _autoScale,
                  centerCircle: true,
                  overCircle: true,
                  circleColors: const [
                    /// If you don't want use Gradient, set just one color
                    Colors.blue,
                  ],
                  child: const Icon(
                    Icons.mic,
                    color: Colors.white,
                    size: 50.0,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个包含滑动条的界面，允许用户调整振幅和缩放比例，并实时更新波浪动画效果。