Flutter波浪动画容器插件wave_container的使用

Wave Container 是一个高度可定制的 Flutter 小部件，用于创建各种效果的美丽波浪动画。以下是该插件的主要功能、安装和使用方法。

功能

• 🌊 平滑波浪动画
• 🎨 多种颜色选项（纯色、渐变、闪烁）
• 📐 各种波形模式（正弦、方波、三角波等）
• ⚡ 交互式动画
• 🎯 可自定义属性
• 📱 响应式设计
• ✨ 使用简单

安装

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  wave_container: ^1.0.0

使用方法

基本用法

下面是一个基本的例子，展示如何使用 WaveContainer 创建一个简单的波浪动画：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wave Container Example'),
        ),
        body: Center(
          child: WaveContainer(
            height: 200,
            waterPercentage: 0.7,
            solidColor: Colors.blue,
          ),
        ),
      ),
    );
  }
}

使用渐变颜色

您可以使用渐变颜色来使波浪更加生动：

WaveContainer(
  height: 200,
  waterPercentage: 0.7,
  waveColorType: WaveColorType.gradient,
  gradientColors: [
    Colors.purple,
    Colors.blue,
    Colors.cyan,
  ],
  gradientStops: [0.0, 0.5, 1.0],
  gradientType: GradientType.diagonal,
)

使用闪烁效果

通过设置 waveColorType 为 WaveColorType.shimmer 来实现闪烁效果：

WaveContainer(
  height: 200,
  waterPercentage: 0.7,
  waveColorType: WaveColorType.shimmer,
  shimmerBaseColor: Colors.blue,
  shimmerHighlightColor: Colors.lightBlue,
  shimmerSpeed: 1.5,
)

不同的波形模式

您可以选择不同的波形模式，如正弦波、方波、三角波等：

WaveContainer(
  height: 200,
  waterPercentage: 0.7,
  waveShape: WaveShape.triangle,
  waveFrequency: 6.0,
  waveHeight: 0.3,
)

自定义波形模式

如果您想创建自己的波形模式，可以使用 customWaveFunction 属性：

WaveContainer(
  height: 200,
  waterPercentage: 0.7,
  waveShape: WaveShape.custom,
  customWaveFunction: (x) => sin(x) * cos(x / 2),
)

属性说明

必需属性

可选属性

示例代码

完整的示例代码如下所示：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wave Container Example'),
        ),
        body: Column(
          children: [
            Expanded(
              child: WaveContainer(
                height: 200,
                waterPercentage: 0.7,
                solidColor: Colors.blue,
              ),
            ),
            Expanded(
              child: WaveContainer(
                height: 200,
                waterPercentage: 0.7,
                waveColorType: WaveColorType.gradient,
                gradientColors: [
                  Colors.purple,
                  Colors.blue,
                  Colors.cyan,
                ],
                gradientStops: [0.0, 0.5, 1.0],
                gradientType: GradientType.diagonal,
              ),
            ),
            Expanded(
              child: WaveContainer(
                height: 200,
                waterPercentage: 0.7,
                waveColorType: WaveColorType.shimmer,
                shimmerBaseColor: Colors.blue,
                shimmerHighlightColor: Colors.lightBlue,
                shimmerSpeed: 1.5,
              ),
            ),
            Expanded(
              child: WaveContainer(
                height: 200,
                waterPercentage: 0.7,
                waveShape: WaveShape.triangle,
                waveFrequency: 6.0,
                waveHeight: 0.3,
              ),
            ),
          ],
        ),
      ),
    );
  }
}