03
May

Flutter Range Slider

0

Flutter Range Slider:

In this tutorial, we are going to study the range slider in flutter app.  using Range Slider we can select either a continuous or a discrete set of values. For discrete values, use a non-null value for divisions.  For example, if min is 0.0 and max is 50.0 and divisions is 5, then the RangeSlider can take on the discrete values 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0. which indicates the number of discrete intervals Range slider means selecting two endpoint values i.e. suppose starting value and end value using this range the range slider filters the data. means it is a type of filter. In most cases to filter the data, we are using a slider range. for example in e-commerce websites before purchasing a product we are going to select a price range filter to show the products within that price range only by this way we are using range filters to filter a data.

 

We can use the range slider for the following three things:

  1. the user selects two values one is a lower value other is higher value, the lower one is a minimum value and higher one is a maximum value.

when the user selects these two values data will be filtered and displays the data between this range.

Parts of Range Slider:

  • The “thumb”, is a shape that slides horizontally when the user drags it over the range.
  • The “track”, which is a line that the slider thumb slides along with it.
  • The “value indicator”, is a shape that pops up when the user is dragging the active thumb to indicate the value lowerValue or upperValue is being selected.

Creating Range Slider in Flutter App:

Add the dependency package to the pubspec.yaml file:

Use the below code to add dependency package to pubspec.yaml file as shown in below code.

dependencies:
flutter_range_slider:

After adding the dependency package run get packages method to import all the dependencies.

Import the package into the dart file:

Use the below code to import the package into the dart file. After importing run the get dependencies method to import all the dependencies into the dart file. without importing if we use it will show exception or error.

import 'package:flutter_range_slider/flutter_range_slider.dart';

 

the Range Slider is disabled if  onChanged method is null.

The RangeSlider widget does not maintain any own state. Instead of that, when the state of the RangeSlider changes, then the widget calls the onChanged callback method. Most of the widgets use a RangeSlider will listen for the onChanged callback and rebuild the RangeSlider with a new set of values lowerValue and upperValue to update the visual appearance of the RangeSlider and then updates the values.

The RangeSlider uses the SliderThemeData. SliderTheme and SliderThemeData for information about controlling the visual appearance of the RangeSlider.

 

Range Slider has two call back methods:

  1. onChangeStart method:

this method is called when the user starts dragging the slider over the given range.

2. onChangeEnd method :

this method is called when the user ends the dragging over the given range slider.

 

Complete Example code for  Flutter Range Slider:

 

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'RangeSlider Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new RangeSliderSample(),
);
}
}

class RangeSliderSample extends StatefulWidget {
@override
_RangeSliderSampleState createState() => _RangeSliderSampleState();
}

class _RangeSliderSampleState extends State {
// List of RangeSliders to use, together with their parameters
List rangeSliders;

double _lowerValue = 20.0;
double _upperValue = 80.0;
double _lowerValueFormatter = 20.0;
double _upperValueFormatter = 20.0;

@override
void initState() {
super.initState();
rangeSliders = _rangeSliderDefinitions();
}

@override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Scaffold(
appBar: new AppBar(title: new Text('RangeSlider Demo')),
body: new Container(
padding: const EdgeInsets.only(top: 50.0, left: 10.0, right: 10.0),
child: new Column(
children: []
..add(
//
// Simple example
//
new RangeSlider(
min: 0.0,
max: 100.0,
lowerValue: _lowerValue,
upperValue: _upperValue,
divisions: 5,
showValueIndicator: true,
valueIndicatorMaxDecimals: 1,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_lowerValue = newLowerValue;
_upperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd: (double newLowerValue, double newUpperValue) {
print(
'Ended with values: $newLowerValue and $newUpperValue');
},
),
)
// Add some space
..add(
new SizedBox(height: 24.0),
)
//
// Add a series of RangeSliders, built as regular Widgets
// each one having some specific customizations
//
..addAll(_buildRangeSliders())

//
// Add a disabled version
//
..add(
new RangeSlider(
min: 0.0,
max: 100.0,
lowerValue: 25.0,
upperValue: 50.0,
divisions: 5,
showValueIndicator: true,
valueIndicatorMaxDecimals: 1,
onChanged: null,
),
)

//
// Add custom value formatter
//
..add(
new RangeSlider(
min: 0.0,
max: 100.0,
lowerValue: _lowerValueFormatter,
upperValue: _upperValueFormatter,
divisions: 10,
showValueIndicator: true,
valueIndicatorFormatter: (int index, double value){
String twoDecimals = value.toStringAsFixed(2);
return '$twoDecimals mm';
},
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_lowerValueFormatter = newLowerValue;
_upperValueFormatter = newUpperValue;
});
},
),
),
),
),
),
);
}

// -----------------------------------------------
// Creates a list of RangeSliders, based on their
// definition and SliderTheme customizations
// -----------------------------------------------
List _buildRangeSliders() {
List children = [];
for (int index = 0; index < rangeSliders.length; index++) { children .add(rangeSliders[index].build(context, (double lower, double upper) { // adapt the RangeSlider lowerValue and upperValue setState(() { rangeSliders[index].lowerValue = lower; rangeSliders[index].upperValue = upper; }); })); // Add an extra padding at the bottom of each RangeSlider children.add(new SizedBox(height: 8.0)); } return children; } // ------------------------------------------------- // Creates a list of RangeSlider definitions // ------------------------------------------------- List _rangeSliderDefinitions() {
return [
RangeSliderData(
min: 0.0, max: 100.0, lowerValue: 10.0, upperValue: 100.0),
RangeSliderData(
min: 0.0,
max: 100.0,
lowerValue: 25.0,
upperValue: 75.0,
divisions: 20,
overlayColor: Colors.red[100]),
RangeSliderData(
min: 0.0,
max: 100.0,
lowerValue: 10.0,
upperValue: 30.0,
showValueIndicator: false,
valueIndicatorMaxDecimals: 0),
RangeSliderData(
min: 0.0,
max: 100.0,
lowerValue: 10.0,
upperValue: 30.0,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.red[50],
valueIndicatorColor: Colors.green),
RangeSliderData(
min: 0.0,
max: 100.0,
lowerValue: 25.0,
upperValue: 75.0,
divisions: 20,
thumbColor: Colors.grey,
valueIndicatorColor: Colors.grey),
];
}
}

// ---------------------------------------------------
// Helper class aimed at simplifying the way to
// automate the creation of a series of RangeSliders,
// based on various parameters
//
// This class is to be used to demonstrate the appearance
// customization of the RangeSliders
// ---------------------------------------------------
class RangeSliderData {
double min;
double max;
double lowerValue;
double upperValue;
int divisions;
bool showValueIndicator;
int valueIndicatorMaxDecimals;
bool forceValueIndicator;
Color overlayColor;
Color activeTrackColor;
Color inactiveTrackColor;
Color thumbColor;
Color valueIndicatorColor;
Color activeTickMarkColor;

static const Color defaultActiveTrackColor = const Color(0xFF0175c2);
static const Color defaultInactiveTrackColor = const Color(0x3d0175c2);
static const Color defaultActiveTickMarkColor = const Color(0x8a0175c2);
static const Color defaultThumbColor = const Color(0xFF0175c2);
static const Color defaultValueIndicatorColor = const Color(0xFF0175c2);
static const Color defaultOverlayColor = const Color(0x290175c2);

RangeSliderData({
this.min,
this.max,
this.lowerValue,
this.upperValue,
this.divisions,
this.showValueIndicator: true,
this.valueIndicatorMaxDecimals: 1,
this.forceValueIndicator: false,
this.overlayColor: defaultOverlayColor,
this.activeTrackColor: defaultActiveTrackColor,
this.inactiveTrackColor: defaultInactiveTrackColor,
this.thumbColor: defaultThumbColor,
this.valueIndicatorColor: defaultValueIndicatorColor,
this.activeTickMarkColor: defaultActiveTickMarkColor,
});

// Returns the values in text format, with the number
// of decimals, limited to the valueIndicatedMaxDecimals
//
String get lowerValueText =>
lowerValue.toStringAsFixed(valueIndicatorMaxDecimals);
String get upperValueText =>
upperValue.toStringAsFixed(valueIndicatorMaxDecimals);

// Builds a RangeSlider and customizes the theme
// based on parameters
//
Widget build(BuildContext context, RangeSliderCallback callback) {
return new Container(
width: double.infinity,
child: new Row(
children: [
new Container(
constraints: new BoxConstraints(
minWidth: 40.0,
maxWidth: 40.0,
),
child: new Text(lowerValueText),
),
new Expanded(
child: new SliderTheme(
// Customization of the SliderTheme
// based on individual definitions
// (see rangeSliders in _RangeSliderSampleState)
data: SliderTheme.of(context).copyWith(
overlayColor: overlayColor,
activeTickMarkColor: activeTickMarkColor,
activeTrackColor: activeTrackColor,
inactiveTrackColor: inactiveTrackColor,
thumbColor: thumbColor,
valueIndicatorColor: valueIndicatorColor,
showValueIndicator: showValueIndicator
? ShowValueIndicator.always
: ShowValueIndicator.onlyForDiscrete,
),
child: new RangeSlider(
min: min,
max: max,
lowerValue: lowerValue,
upperValue: upperValue,
divisions: divisions,
showValueIndicator: showValueIndicator,
valueIndicatorMaxDecimals: valueIndicatorMaxDecimals,
onChanged: (double lower, double upper) {
// call
callback(lower, upper);
},
),
),
),
new Container(
constraints: new BoxConstraints(
minWidth: 40.0,
maxWidth: 40.0,
),
child: new Text(upperValueText),
),
],
),
);
}
}

Congratulations You Have Learned Range Slider In Flutter App….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories