Flutterexperts

Flutter lets you make lovely, natively assembled applications. The explanation Flutter can do this is Flutter adores Material. As UI configuration keeps on advancing, Material keeps on refreshing its segments, movement, and plan framework. The range slider, an exceptionally adaptable portion for choosing a range of value, has been released in Flutter 1.7.

Flutter recently updated the RangeSlider widgets to the latest Material guidelines. This article explores the changes to the RangerSlider widgets and uses in your flutter application.

Table of Contents:

Range Slider— Introduction

Components

Code Implementation

Use Custom Shapes

Code File

Conclusion

---

---

Range Slider

Range sliders have two determination focuses that consider an adaptable change of minimum and maximum value points. This adaptability makes it a valuable segment, for example, when a client likes to control a particular range, for example, showing value focuses or a time.

Components

Range Slider consist of five parts show in above image:

1. The thumb is the shape that slides on a level plane when the client drags it.
2. The track is the line that the slider thumb slides along. It has a functioning active and an inactive inert side.
3. The overlay is the corona impact that shows up while the thumb is squeezed while dragging.
4. The tick marks are consistently separated imprints that are drawn when utilizing discrete divisions.
5. The value indicator shows up when the client is dragging the thumb to demonstrate the value being chosen.

Code Implementation

The genuine range slider values are put away as the state in the parent widget. The value is refreshed by calling setState() inside the RangeSlider’s onChange() callback. In other words, so as to have an interactive range slider, the RangeSlider the widget itself must be made inside a StatefulWidget.

RangeValues values = RangeValues(1, 100);

RangeSlider(  
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
   min: 1,
    max: 100,
    values: values,
    onChanged: (values){
    setState(() {
      values =values;
    });
    }
),

At the point when the thumbs are further separated, contacting the internal track doesn’t choose a thumb

We will add Range labels and divisions

RangeLabels labels =RangeLabels('1', "100");

RangeSlider(
  divisions: 5,
    activeColor: Colors.red[700],
    inactiveColor: Colors.red[300],
  min: 1,
    max: 100,
    values: values,
    labels: labels,
    onChanged: (value){
    print("START: ${value.start}, End: ${value.end}");

setState(() {
      values =value;
      labels =RangeLabels("${value.start.toInt().toString()}\$", "${value.start.toInt().toString()}\$");
    });
    }
),

Tick mark

The tick mark size and positioning changed. The tick marks are presently part of the track segment as opposed to expanding the finish of the track. There is additionally padding on the tick mark, so it shows up inside the track component.

Use Custom Shapes

SliderTheme(
  data: SliderThemeData(
    rangeThumbShape: CustomRangeShape(),
    trackHeight: 2
  ),
),

We will use Slider Theme then add SliderThemeData. In these theme data, we will add range thumb shape, track height, etc. we will add the CustomRangeShape of class into Slider Theme Data

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:ranger_slider/main.dart';

class CustomRangeShape extends RangeSliderThumbShape {
  static const double _thumbSize = 10.0;

@override
  Size getPreferredSize(bool isEnabled, bool isDiscrete){
    return Size.fromRadius(_thumbSize);
  }

@override
  void paint(
      PaintingContext context,
      Offset center, {
        @required Animation<double> activationAnimation,
        @required Animation<double> enableAnimation,
        bool isDiscrete = false,
        bool isEnabled = false,
        bool isOnTop,
        @required SliderThemeData sliderTheme,
        TextDirection textDirection,
        Thumb thumb,
      }) {
    final Canvas canvas = context.canvas;

Path thumbPath;
    switch (textDirection) {
      case TextDirection.rtl:
        switch (thumb) {
          case Thumb.start:
            thumbPath = _rightShape(_thumbSize, center);
            break;
          case Thumb.end:
            thumbPath = _leftShape(_thumbSize, center);
            break;
        }
        break;
      case TextDirection.ltr:
        switch (thumb) {
          case Thumb.start:
            thumbPath = _leftShape(_thumbSize, center);
            break;
          case Thumb.end:
            thumbPath = _rightShape(_thumbSize, center);
            break;
        }
        break;
    }
    canvas.drawPath(thumbPath, Paint()..color = sliderTheme.thumbColor);
  }
}

Path _rightShape(double size, Offset thumbCenter, {bool invert = false}) {
  final Path thumbPath = Path();
  final double halfSize = size / 1.5;
  final double sign = invert ? -1.0 : 1.0;
  thumbPath.moveTo(thumbCenter.dx + halfSize * sign, thumbCenter.dy);
  thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy - size);
  thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy + size);
  thumbPath.close();
  return thumbPath;
}

Path _leftShape(double size, Offset thumbCenter) => _rightShape(size, thumbCenter, invert: true);

The points of interest here are the two overridden methods. The getPreferredSize and paint methods.

The paint method is utilized legitimately for custom drawing. Since we are expanding the RangeSliderThumbShape class, the paint method gets all the important information required for the structure of the thumb, overlay, or whatever other parts that extend out the RangeSliderThumbShape class to manufacture.

Code File

https://gist.github.com/ShaiqAhmedkhan/b28cd4312ab8897588559d50bd13032f#file-main-dart

Conclusion :

This article would serve as an Exploratory article for RangeSlider in Flutter and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up RangeSlider in Flutter in your Flutter projects. You will use a range slider in your project and update your latest Flutter version. The behavior and visual appearance can be changed in the theme at the global level, or on an instance-by-instance basis. 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.

---

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.

---