Let’s talk about flutter range slider customization but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter syncfusion range and single sliders, what they really are, their role, and usage in flutter apps and finally the mentioned flutter range and single slider example.
Introduction
Flutter sliders is a very beautiful and user friendly way of getting data from user. User just have to slide the slider to specify the particular value. If the slider is a range slider, then user can specify the first and last slider e.g. if some specific range of age is required then user can slide the first point of slider to let’s say 18 years and the second one to 35 years. So, in this way, all the age group that lies within that range will be taken. Let’s see how to import and implement our range slider and a single slider.
Import Syncfusion Flutter Sliders
syncfusion_flutter_sliders: ^19.4.55
Implementation
We will user two sliders in this example:
- Flutter Syncfusion Range Slider
- Flutter Syncfusion Single Slider
We will explain range slider in this article and would love to see you practice the single slider. Don’t worry, it will be implemented in the source code as well, so if you feel like stuck then you can check it out in the source code that will be provided. Let’s now implement our syncfusion range slider in our app.
Syncfusion Range Slider
SfRangeSlider(
min: 0,
max: 100,
values: SfRangeValues(0, 100),
onChanged: (value) {},
)
- min constructor defines the minimum amount that the user can select.
- max constructor defines the max amount that the user can select.
- Values constructor defines the current selected values in the slider using the thumbs(these two small circles in the slider).
- On changed constructor is called when the user drags one of the thumb to select a new value.
As you can see, by implementing this code, we now see a blue slider in our screen, having two thumbs which are not yet slidable, to make them slidable, we have to give dynamic values to our values constructor using the on changed constructor.
Dynamic Values In Range Slider
SfRangeSlider(
min: 0,
max: 100,
values: SfRangeValues(rangeStart, rangeEnd),
onChanged: (value) {
setState(() {
rangeStart = value.start;
rangeEnd = value.end;
});
},
)Tool Tip Of Range Slider
enableTooltip: true
Tool Tip Customization
SfRangeSliderTheme(
data: SfRangeSliderThemeData(
tooltipBackgroundColor: Colors.white,
tooltipTextStyle: TextStyle(
color: Color(0xffF5B7B1),
fontSize: 12,
fontWeight: FontWeight.w600),
),
child: SfRangeSlider(
// the slider that we are currently working on
))As you can see, we have wrapped our sf range slider with a sf range slider theme class, using its data constructor, we can customize the theme data of our sf range slider.
- Too tip background color constructor is used to change the background color of our tool tip, we have specified it to white.
- Too tip text style constructor is used to style text text that appears in the tool tip, we have customize the text color, size and weight, you can choose your values depending on the design that you want to get.
- import ‘package:syncfusion_flutter_core/theme.dart’; Import the theme in case you don’t see it in suggestions.
Let’s see how our tool tip looks now when we drag our slider:
Tool Tip Text Formatter Callback
tooltipTextFormatterCallback: (actualValue, formattedText) {
double d = actualValue;
return '${d.toStringAsFixed(0)} years old';
}The tooltip text formatter constructor is used formatting or changing the label text of the tooltip.
- The value that is given without proper formatting in in actual value. It can be a double or a date time etc.
- The formatted text is in a proper format based on the value i.e. double of date time etc.
Now when you slide the thumbs of the slider, you will see an update in the values of both thumbs tooltip, as we have returned a string having the actual value and by specifying the toStringAsFixed function to zero means there will be no numbers after the period(.) e.g. 2.54 will become 2.
Drag Mode
dragMode: SliderDragMode.both
- dragMode: SliderDragMode.onThumb Drag using thumb
- dragMode: SliderDragMode.betweenThumbs Drag using the slider path between the two thumbs
- dragMode: SliderDragMode.both Drag using both, either we can use thumb or the sliding path
Active Color
activeColor: Color(0xffF5B7B1)
Start Thumb Icon
startThumbIcon: Container( decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle), child: Container( decoration: BoxDecoration( color: Color(0xffF5B7B1), shape: BoxShape.circle), margin: EdgeInsets.all(3), ), )
End thumb Icon
endThumbIcon: Container( decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle), child: Container( decoration: BoxDecoration( color: Color(0xffF5B7B1), shape: BoxShape.circle), margin: EdgeInsets.all(3), ), )
shouldAlwaysShowTooltip: true
Source Code
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';
import 'package:syncfusion_flutter_core/theme.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Beautiful Slider',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double singleSlideValue = 0;
double rangeStart = 0;
double rangeEnd = 100;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color(0xffFDEDEC),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Range Slider',
style: TextStyle(
shadows: [
Shadow(
blurRadius: 4,
color: Colors.black12,
offset: Offset(2, 2))
],
color: Color(0xffF5B7B1),
fontSize: 28,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 30,
),
SfRangeSliderTheme(
data: SfRangeSliderThemeData(
tooltipBackgroundColor: Colors.white,
tooltipTextStyle: TextStyle(
color: Color(0xffF5B7B1),
fontSize: 12,
fontWeight: FontWeight.w600),
),
child: SfRangeSlider(
shouldAlwaysShowTooltip: true,
dragMode: SliderDragMode.both,
tooltipTextFormatterCallback: (actualValue, formattedText) {
double d = actualValue;
return '${d.toStringAsFixed(0)} years old';
},
enableTooltip: true,
min: 0,
max: 100,
activeColor: Color(0xffF5B7B1),
startThumbIcon: Container(
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF5B7B1), shape: BoxShape.circle),
margin: EdgeInsets.all(3),
),
),
endThumbIcon: Container(
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF5B7B1), shape: BoxShape.circle),
margin: EdgeInsets.all(3),
),
),
values: SfRangeValues(rangeStart, rangeEnd),
onChanged: (value) {
setState(() {
rangeStart = value.start;
rangeEnd = value.end;
});
},
),
),
SizedBox(height: 50),
Text(
'Single Slider',
style: TextStyle(
shadows: [
Shadow(
blurRadius: 4,
color: Colors.black12,
offset: Offset(2, 2))
],
color: Color(0xffF5B7B1),
fontSize: 28,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 30,
),
SfSliderTheme(
data: SfRangeSliderThemeData(
tooltipBackgroundColor: Colors.white,
tooltipTextStyle: TextStyle(
color: Color(0xffF5B7B1),
fontSize: 13,
fontWeight: FontWeight.w600)),
child: SfSlider(
value: singleSlideValue,
tooltipShape: SfRectangularTooltipShape(),
tooltipTextFormatterCallback: (actualValue, formattedText) {
double d = actualValue;
return d.toStringAsFixed(0);
},
enableTooltip: true,
min: 0,
max: 100,
activeColor: Color(0xffF5B7B1),
thumbIcon: Container(
decoration: BoxDecoration(
color: Color(0xffF5B7B1), shape: BoxShape.circle),
child: Container(
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
margin: EdgeInsets.all(3),
),
),
onChanged: (value) {
setState(() {
singleSlideValue = value;
});
},
),
)
],
)));
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
