A custom Flutter value slider that makes a wave effect when dragged.

Overview

A Flutter slider that makes a wave effect when dragged. Does a little bounce when dropped.

Demo

Getting Started

To use this plugin, add wave_slider as a dependency in your pubspec.yaml file.

The color can be set with the color property. The slider size is dependent on the size of its parent. The height of the wave slider can be set with the sliderHeigth property - which is constrained with a minimum of 50 and a maximum of 600.

An option displayTrackball property can be set to true to show a trackball along with the slider. The default is false

Values are retrieved by passing in an onChanged callback, which returns a value between 0 and 1 to indicate the current drag completion percentage.

The onChangeStart and onChangeEnd callbacks can be used to retrieve the start and end drag percentages respectively.

Example

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

void main() => runApp(MaterialApp(
      home: App(),
    ));

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  double _dragPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          WaveSlider(
            displayTrackball: false,
            onChanged: (double dragUpdate) {
              setState(() {
                _dragPercentage = dragUpdate *
                    100; // dragUpdate is a fractional value between 0 and 1
              });
            },
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'Drag percentage',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '$_dragPercentage',
              style: TextStyle(fontSize: 16),
            ),
          )
        ],
      ),
    );
  }
}

Interested in how the package was made?

Check out this playlist on the Fun with Flutter YouTube channel!

You might also like...

A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

sliding_up_panel A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component,

Jan 7, 2023

A flutter package which makes it easier to display the difference between two images.

A flutter package which makes it easier to display the difference between two images.

đź‘Ź Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Dec 30, 2022

A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

Dec 22, 2022

Create your own custom SlideTransition combined with some animation in Flutter.

Create your own custom SlideTransition combined with some animation in Flutter.

Create your own custom SlideTransition combined with some animation in Flutter.

Jun 21, 2022

Writing custom Widgets in Flutter

Writing custom Widgets in Flutter

Flutter - Custom Widgets Part 1 - EllipsizedText / LeafRenderObjectWidget Writing custom Widgets in Flutter (Part 1) — EllipsizedText Part 2 - ChildSi

Dec 9, 2022

A flutter project with Implementation of a Contacts app in 4 ways (API, Custom, Preferences and Sqflite).

A flutter project with Implementation of a Contacts app in 4 ways (API, Custom, Preferences and Sqflite).

Contacts A flutter project with Implementation of a Contacts app in 4 ways (API, Custom, Preferences and Sqflite). It consist some common operations l

Nov 20, 2022

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

Custom Splash Screen A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from ani

Sep 6, 2022

Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter

Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter

SlideTransition Animation - Flutter Create your own custom SlideTransition combi

Jan 9, 2022

A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

Jan 5, 2023
Comments
  • No trackball inside the slider?

    No trackball inside the slider?

    Is there any chance to include the trackball inside the slider? So when user slide it a small trackball appear below the wave-line as an indicator of position when user slides.

    opened by erpriliano 5
  • Trackball inside the slider was added

    Trackball inside the slider was added

    Based on this issue https://github.com/funwithflutter/wave-slider/issues/1 it's interesting to have a visual indicator apart from the curve of the line to have more feedback about the current position.

    I created a new property for WaveSlider , it's a bool value displayTrackball (false by default).

    Also I created a sample project inside the current project (just as all packages have)

    This is a demo slider_trackball

    Usage

      WaveSlider(
                displayTrackball: true,
                onChanged: (double dragUpdate) {
                  setState(() {
                    _dragPercentage = dragUpdate *
                        100; // dragUpdate is a fractional value between 0 and 1
                  });
                },
              ),
    
    opened by diegoveloper 0
Owner
Gordon Hayes
Gordon Hayes
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
A reactive key-value store for Flutter projects. Like shared_preferences, but with Streams.

streaming_shared_preferences A reactive key-value store for Flutter projects. streaming_shared_preferences adds reactive functionality on top of share

Iiro Krankka 244 Dec 22, 2022
Simple and configurable app introduction slider for Flutter

FLUTTER INTRO SLIDER Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app. Create intro has never been easier and fa

Duy Tran 623 Jan 7, 2023
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
Bubbleslider - A flutter package support a slider customize UI with bubble animation

bubble_slider This package support a slider customize UI with bubble animation.

MindInventory 11 Jul 26, 2022
PaperOnboarding is a material design slider made by @Ramotion

PAPER ONBOARDING Android library Paper Onboarding is a material design UI slider written on Java We specialize in the designing and coding of custom U

Ramotion 2.6k Dec 28, 2022
Flutter UI challenge- Parallax scroll effect

Flutter UI Challenge- "Urban Planners" Parallax Scroll About project The application was written based on this great UI concept: https://dribbble.com/

Tomasz Pawlikowski 264 Dec 26, 2022
A Flutter plugin to create views using concentric transition effect.

Concentric Transition A Flutter plugin to create views using Concentric Transition Clipper. Useful for onboarding, page transitions, custom clippers,

Vladyslav Korniienko 202 Jan 7, 2023
Thanos snap effect in Flutter

snappable Thanos effect library in Flutter Check out blog post describing the package on Fidev. Examples Getting Started Import it import 'package:sna

Marcin Szałek 332 Dec 6, 2022
Kenburns effect on flutter

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. Wrap your image with a KenBurns wid

Florent CHAMPIGNY 82 Sep 22, 2022