TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them.
Features
An extension of the Flutter Material Slider to allow selection of a range of values via 2 thumbs
Getting started
You should ensure that you add the following dependency in your Flutter project. dependencies: flutter_range_slider: "^1.5.0" You should then run flutter packages upgrade or update your packages in IntelliJ. In your Dart code, to use it: import 'package:flutter_range_slider/flutter_range_slider.dart' as frs;
Usage
An example can be found in the example folder. Check it out.
import 'package:flutter/material.dart';
import 'package:flutter_range_slider/flutter_range_slider.dart' as frs;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RangeSlider Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RangeSliderSample(),
);
}
}
class RangeSliderSample extends StatefulWidget {
@override
_RangeSliderSampleState createState() => _RangeSliderSampleState();
}
class _RangeSliderSampleState extends State<RangeSliderSample> {
// List of RangeSliders to use, together with their parameters
List<RangeSliderData> 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 SafeArea(
top: false,
bottom: false,
child: Scaffold(
appBar: AppBar(title: Text('RangeSlider Demo')),
body: Container(
padding: const EdgeInsets.only(top: 50.0, left: 10.0, right: 10.0),
child: Column(
children: <Widget>[]
..add(
//
// Simple example
//
frs.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(
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(
frs.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(
frs.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<Widget> _buildRangeSliders() {
List<Widget> children = <Widget>[];
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(SizedBox(height: 8.0));
}
return children;
}
// -------------------------------------------------
// Creates a list of RangeSlider definitions
// -------------------------------------------------
List<RangeSliderData> _rangeSliderDefinitions() {
return <RangeSliderData>[
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, frs.RangeSliderCallback callback) {
return Container(
width: double.infinity,
child: Row(
children: <Widget>[
Container(
constraints: BoxConstraints(
minWidth: 40.0,
maxWidth: 40.0,
),
child: Text(lowerValueText),
),
Expanded(
child: 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,
//trackHeight: 8.0,
thumbColor: thumbColor,
valueIndicatorColor: valueIndicatorColor,
showValueIndicator: showValueIndicator
? ShowValueIndicator.always
: ShowValueIndicator.onlyForDiscrete,
),
child: frs.RangeSlider(
min: min,
max: max,
lowerValue: lowerValue,
upperValue: upperValue,
divisions: divisions,
showValueIndicator: showValueIndicator,
valueIndicatorMaxDecimals: valueIndicatorMaxDecimals,
onChanged: (double lower, double upper) {
// call
callback(lower, upper);
},
),
),
),
Container(
constraints: BoxConstraints(
minWidth: 40.0,
maxWidth: 40.0,
),
child: Text(upperValueText),
),
],
),
);
}
}
Additional information
TODO: Tell users more about the package: where to find more information, how to contribute to the package, how to file issues, what response they can expect from the package authors, and more.