Water Animation
A simple Flutter package that provides a customizable water animation widget to create realistic water effects with animated waves, gradient fills, and interactive ripple effects.
Features
- Animated Waves: Simulate dynamic water surfaces with smooth, animated waves.
- Customizable Water Level: Control the water fill level via the
waterFillFractionparameter. - Animated Fill Transition: Smoothly animate changes in water level using
fillTransitionDurationandfillTransitionCurve. - Customizable Appearance: Adjust wave amplitude, frequency, speed, water color, and gradient fills to match your design.
- Secondary Wave: Optionally add a secondary wave layer for extra visual depth.
- Realistic Wave Mode: Enable
realisticWaveto generate a more natural, complex wave shape. - Ripple Effects & Tap Interactions: Trigger ripple effects on tap and handle custom tap events with the
onTapcallback. - Decorative Container: Style the water animation with the
decorationparameter, supporting features like rounded borders through clipping. - Easy Integration: Designed for quick and hassle-free integration into your existing Flutter projects.
Getting Started
-
Add Dependency:
Addwater_animationto your project'spubspec.yamlfile:dependencies: water_animation: ^0.0.3 -
Install the Package:
Run the following command in your terminal:flutter pub get
Usage
Import the package in your Dart file and use the WaterAnimation widget. For example:
import 'package:flutter/material.dart';
import 'package:water_animation/water_animation.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Water Animation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Water Animation Demo')),
body: Column(
children: [
Expanded(
child: Center(
child: WaterAnimation(
width: MediaQuery.of(context).size.width,
height: 200,
waterFillFraction: 0.5, // 50% fill level
fillTransitionDuration: Duration(seconds: 1),
fillTransitionCurve: Curves.easeInOut,
amplitude: 20,
frequency: 1,
speed: 3,
waterColor: Colors.blue,
gradientColors: [Colors.blue, Colors.lightBlueAccent],
enableRipple: true,
enableShader: false,
enableSecondWave: true,
secondWaveColor: Colors.blueAccent,
secondWaveAmplitude: 10.0,
secondWaveFrequency: 1.5,
secondWaveSpeed: 1.0,
realisticWave: true,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
onTap: () {
print('Water tapped!');
},
),
),
),
],
),
),
);
}
}
Additional Information
-
Repository:
For more details, to contribute, or to file issues, please visit the GitHub repository. -
Contributing:
Contributions are welcome! Feel free to open issues or submit pull requests with improvements. -
License:
This package is released under the MIT License. See the LICENSE file for details.