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 #

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 #

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 #

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