Zeba Academy Wave Slider

A beautiful, highly customizable animated wave slider for Flutter featuring smooth wave animations, customizable colors, labels, controller support, and responsive touch interactions.

✨ Features

🌊 Beautiful animated wave effect
🎯 Smooth drag and tap interactions
🎨 Fully customizable colors
🏷 Optional labels
📱 Responsive layout
🎛 Programmatic controller support
⚡ Smooth animations
🔢 Configurable minimum and maximum values
📦 Lightweight and easy to use
💙 Null Safety support
🚀 Flutter 3 compatible

Preview

Animated Wave Slider
(Add your package GIF or screenshot here)

Example:

0 ---------------------- 50 ---------------------- 100
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Installation

Add the dependency to your pubspec.yaml.

dependencies:
  zeba_academy_wave_slider: latest

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_wave_slider/zeba_academy_wave_slider.dart';

Basic Usage

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

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wave Slider'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: WaveSlider(
          min: 0,
          max: 100,
          onChanged: (value) {
            debugPrint(value.toString());
          },
        ),
      ),
    );
  }
}

Using a Controller

final controller = WaveSliderController(
  initialValue: 40,
);

WaveSlider(
  controller: controller,
)

Update value programmatically:

controller.value = 75;

Custom Theme

WaveSlider(
  theme: WaveSliderTheme(
    activeColor: Colors.indigo,
    inactiveColor: Colors.grey.shade300,
    waveColor: Colors.lightBlue,
  ),
)

Hide Labels

WaveSlider(
  showLabels: false,
)

Listen for Value Changes

WaveSlider(
  onChanged: (value) {
    print(value);
  },
)

Available Properties

Property	Type	Default	Description
min	double	0	Minimum value
max	double	100	Maximum value
controller	WaveSliderController?	null	Slider controller
theme	WaveSliderTheme	Default Theme	Slider appearance
showLabels	bool	true	Show labels
onChanged	ValueChanged	null	Value change callback

WaveSliderTheme

Customize the appearance of the slider.

WaveSliderTheme(
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
  waveColor: Colors.lightBlue,
)

WaveSliderController

The controller allows updating the slider value programmatically.

final controller = WaveSliderController(
  initialValue: 25,
);

controller.value = 80;

Why Zeba Academy Wave Slider?

Smooth wave animation
Modern UI
Lightweight
Easy integration
Highly customizable
Clean architecture
Null-safe
Production ready

Platform Support

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

Roadmap

Future updates may include:

Gradient wave
Multiple wave styles
Vertical slider
Tooltip bubble
Haptic feedback
Tick marks
Discrete mode
RTL support
Accessibility improvements
Additional animation presets

Contributing

Contributions are welcome!

If you discover a bug, have an idea for a new feature, or would like to improve the package, feel free to open an issue or submit a pull request.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007

Copyright (C) 2026 Zeba Academy

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License,
or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

See the LICENSE file for the complete license text.

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn:

https://www.linkedin.com/in/sufyanism

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at Zeba Academy and Code Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Main Website: https://zeba.academy

➡ Courses & Resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

Support

If you like this package, please:

⭐ Star the repository

👍 Like and share

🐛 Report issues

💡 Suggest new features

Made with ❤️ by Zeba Academy