flutter xlider material design
a material design slider and range slider with rtl support and lots of options and customizations for flutter.
get started with the material design
single slider
a single slider
flutterslider(
values: [300],
max: 500,
min: 0,
ondragging: (lowervalue, uppervalue) {
_lowervalue = lowervalue;
_uppervalue = uppervalue;
setstate(() {});
},
)
to make slider right to left
use rtl: true
flutterslider(
...
rtl: true,
...
)
range slider
a simple example of material design slider
flutterslider(
values: [30, 420],
rangeslider: true,
max: 500,
min: 0,
ondragging: (lowervalue, uppervalue) {
_lowervalue = lowervalue;
_uppervalue = uppervalue;
setstate(() {});
},
)
handlers
you can customize handlers using handler
and righthandler
properties.
width
and height
are required for custom handlers, so we use sizedbox
as a wrapper
if you use rangeslider
then you should define righthandler
as well if you want to customize handlers
here there is a range slider with customized handlers and trackbars
flutterslider(
...
handler: sizedbox(
width: 20,
height: 50,
child: container(
child: icon(
icons.view_headline,
color: colors.black54,
size: 13,
),
decoration: boxdecoration(
color: colors.white,
border: border.all(color: colors.black.withopacity(0.12))),
),
),
righthandler: sizedbox(
width: 20,
height: 50,
child: container(
child: icon(
icons.view_headline,
color: colors.black54,
size: 13,
),
decoration: boxdecoration(
color: colors.white,
border: border.all(color: colors.black.withopacity(0.12))),
),
),
...
)
handler scale animation
you can control the scale animation type of your handlers, it’s duration and it’s scale size using handleranimation
handleranimation
accepts a fluttersliderhandleranimation
class which has 4 properties as following
flutterslider(
...
handleranimation: fluttersliderhandleranimation(
curve: curves.elasticout,
reversecurve: curves.bouncein,
duration: duration(milliseconds: 500),
scale: 1.5
),
...
)
if you don’t want scale animation, then just pass 1
to scale
property
if you don’t want reversecurve
, just ignore it. default is null
trackbars
to customize track bars you can use flutterslidertrackbar
. you can see the details here
flutterslider(
...
trackbar: flutterslidertrackbar(
activetrackbarcolor: colors.redaccent,
activetrackbarheight: 5,
leftinactivetrackbarcolor: colors.greenaccent.withopacity(0.5),
),
...
)
tooltips
in order to customize your tooltips, you can use flutterslidertooltip
class. you can see all properties here
flutterslider(
...
tooltip: flutterslidertooltip(
textstyle: textstyle(fontsize: 17, color: colors.white),
boxstyle: flutterslidertooltipbox(
decoration: boxdecoration(
color: colors.redaccent.withopacity(0.7)
)
)
),
...
)
tooltip prefix
you can use leftprefix
, leftsuffix
, rightprefix
, rightsuffix
to add your desired widget around tooltip content.
flutterslider(
...
tooltip: flutterslidertooltip(
leftprefix: icon(icons.attach_money, size: 19, color: colors.black45,),
rightsuffix: icon(icons.attach_money, size: 19, color: colors.black45,),
),
...
)
tooltip number format
you can customize tooltip numbers by using numberformat
class
here is an example
flutterslider(
...
tooltip: flutterslidertooltip(
numberformat: intl.numberformat(),
// numberformat: intl.compact(),
),
...
)
you can find more about numberformat
controls
jump
by default slider handlers move fluently, if you set jump
to true, handlers will jump between intervals
flutterslider(
...
jump: true,
...
)
divisions
the number of discrete divisions
flutterslider(
...
divisions: 25,
...
)
ignore steps
if your configurations requires that some steps are not available, you can use ignoresteps
property.
this property accepts a simple class to define from
and to
ranges.
flutterslider(
...
ignoresteps: [
fluttersliderignoresteps(from: 8000, to: 12000),
fluttersliderignoresteps(from: 18000, to: 22000),
],
...
)
minimum distance
when using range slider, the minimum distance between two handlers can be defined using minimumdistance
option
flutterslider(
...
minimumdistance: 300,
...
)
maximum distance
this is the opposite of minimum distance, when using range slider, the maximum distance between two handlers can be defined using maximumdistance
option
flutterslider(
...
maximumdistance: 300,
...
)
always show tooltips
tooltips always displayed if this property is set to true
. like above example
flutterslider(
...
alwaysshowtooltip: true,
...
)
touch zone
you can control how big a handler’s touch area could be. by default touch zone is 2
the range is between 1 to 5
flutterslider(
...
touchzone: 2,
...
)
to see the touchable area for handlers you set displaytesttouchzone
to true and test your slider
flutterslider(
...
displaytesttouchzone: true,
...
)
disabled
to disable your slider, you can use disabled
.
flutterslider(
...
disabled: true,
...
)
rtl
makes the slider right to left
flutterslider(
...
rtl: true,
...
)
events
there are 3 events
ondragstarted
: fires when drag starts
ondragcompleted
fires when drag ends
ondragging
keeps firing when dragging
all three of above functions returns two double
values. lower value
and upper value
flutterslider(
...
ondragging: (lowervalue, uppervalue) {
_lowervalue = lowervalue;
_uppervalue = uppervalue;
setstate(() {});
},
...
)
Comments are closed.