Flutterexperts

A slider in Flutter is a material design widget utilized for choosing a scope of values. It is an information widget where we can set a range of values by dragging or pushing the ideal position.

Typically, we utilize the slider widget for changing a value. Along these lines, it is needed to store the value in a variable. This widget has a slider class that requires the onChanged() work. This capacity will be called at whatever point we change the slider position.

In this blog, we will explore the Wave Slider In Flutter. We will implement a wave slider demo program and show a wave effect when dragged using the wave_slider package in your flutter applications.

wave_slider | Flutter Package
A Flutter slider that makes a wave effect when dragged. It does a little bounce when dropped. To use this plugin, add…pub.dev

Table Of Contents::

Wave Slider

Properties

Implementation

Code Implement

Code File

Conclusion

---

---

Wave Slider:

A Flutter slider that makes a wave impact when dragged. It does a little bounce when dropped. Can utilize a slider for choosing a value from a continuous or discrete arrangement of values. Of course, it utilizes a constant scope of values by dragging or pushing on the ideal position.

Demo Module :

This demo video shows how to create a wave slider in a flutter. It shows how the wave slider will work using the wave_slider package in your flutter applications. It shows a wave effect when dragging or pressing on the desired position. It will be shown on your device.

Properties:

There are some properties for wave slider are:

• > sliderHeight: This property is used to the height of the slider can be set by specifying a sliderHeight. The default height is 50.0.
• > color: This property is used to the color of the slider can be set by specifying a color. The default color is black.
• > onChanged: This property is used to the called during a drag when the user selects a new value for the slider by dragging. Returns a percentage value between any number for the current drag position.
• > displayTrackball: This property is used to display a trackball below the current position’s line as a visual indicator.
• > onChangeStart: This property is used when the user starts selecting a new value for the slider.
• > onChangeEnd: This property is used when the user is done selecting a new value for the slider.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

wave_slider: 

Step 2: Import

import 'package:wave_slider/wave_slider.dart';

Step 3: Run flutter packages in your app’s root directory.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called slider_demo.dart inside the lib folder.

First, we will create a variable in double and given named _dragValue is equal to zero.

double _dragValue = 0;

In the body, we will add a WaveSlider(). Inside, we will add a color of the slider that can be set by specifying a color. We will add a sliderHeight, which means the user can set the slider’s height by specifying a sliderHeight. The default height is 50.0.

WaveSlider(
  color: Colors.teal,
  sliderHeight: 70,
  displayTrackball: true,
  onChanged: (double dragUpdate) {
    setState(() {
      _dragValue = dragUpdate*150; // dragUpdate is a fractional value between 0 and 1
    });
  },
),

We will add a displayTrackball mean to display a trackball below the line on the current position as a visual indicator and add an onChanged() method. In this method, we will add a setState(). We will add a _dragValue equal to the drag Update, and dragUpdate is a fractional value between 0 and 1.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text(
    'Drag Value',
    style: TextStyle(fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.black),
  ),
),
Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text(
    '$_dragValue',
    style: TextStyle(fontSize: 16,
      color: Colors.red,),
  ),
)

We will add a text and show a variable text. When the slider moves, it will be shown the number on your devices. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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

class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _dragValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.brown[50],
      appBar: AppBar(
      title: Text("Flutter Wave Slider Demo"),
      automaticallyImplyLeading: false,),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          WaveSlider(
            color: Colors.teal,
            sliderHeight: 70,
            displayTrackball: true,
            onChanged: (double dragUpdate) {
              setState(() {
                _dragValue = dragUpdate*150;
              });
            },
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'Drag Value',
              style: TextStyle(fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '$_dragValue',
              style: TextStyle(fontSize: 16,
                color: Colors.red,),
            ),
          )
        ],
      ),
    );
  }
}

Conclusion:

In the article, I have explained the Wave Slider basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Wave Slider On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Wave Slider in your flutter projects. We will show you what the Wave Slider is?. Some wave slider properties, make a demo program for working Wave Slider and show a wave effect when dragging or pressing on the desired position using the wave_slider package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Wave Slider Demo:

flutter-devs/flutter_wave_slider_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---