Wave Container #

A highly customizable Flutter widget for creating beautiful wave animations with various effects.

Features #

• 🌊 Smooth wave animations
• 🎨 Multiple coloring options (solid, gradient, shimmer)
• 📐 Various wave patterns (sine, square, triangle, etc.)
• ⚡ Interactive animations
• 🎯 Customizable properties
• 📱 Responsive design
• ✨ Easy to use

Installation #

Add this to your pubspec.yaml:

dependencies:
  wave_container: ^1.0.0

Usage #

Basic Usage #

import 'package:wave_container/wave_container.dart';

// WaveContainer(
//   height: 200,
//   waterPercentage: 0.7,
//   solidColor: Colors.blue,
// )

With Gradient Colors #

// 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,
// )

With Shimmer Effect #

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

Different Wave Patterns #

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

Custom Wave Pattern #

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

Properties #

Required Properties #

Optional Properties #

Wave Types #

The widget supports different types of waves through the waveShape property:

• sine - Smooth sine wave (default)
• square - Rectangular wave
• triangle - Angular wave
• sawtooth - Sharp rise and fall
• ladder - Step pattern
• random - Random heights
• custom - User-defined pattern

Coloring Options #

Solid Color #

Simple single color wave.

Gradient #

Smooth transition between multiple colors with options for:

• Vertical gradient
• Horizontal gradient
• Diagonal gradient

Shimmer #

Animated shimmering effect with customizable:

• Base color
• Highlight color
• Animation speed

Examples #

Check out the example folder for complete sample app showcasing all features.

Performance Optimization #

For optimal performance:

• Use simpler wave shapes (sine, triangle) when possible
• Avoid excessive wave frequency values
• Use solid colors instead of gradients/shimmer for better performance
• Consider device capabilities when customizing animation speeds

1. Fork the repo
2. Create your feature branch:

   git checkout -b feature/my-new-feature
   

3. Commit your changes:

   git commit -m 'Add some feature'
   

4. Push to the branch:

   git push origin feature/my-new-feature
   

5. Submit a pull request

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

• 🐛 Report bugs by filing GitHub Issues
• 💡 Feature requests are welcome
• 📫 For questions, reach out to [email protected]

Made with ❤️ by [DungNm]