Labels and Divisors in Flutter Treemap (SfTreemap)
4 May 202124 minutes to read
This section explains about how to add the labels and divisors in the slider.
Show labels
The showLabels
property is used to render the labels on given interval. The default value of showLabels
property is false
.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: 0.0,
max: 10.0,
interval: 2,
showLabels: true,
showTicks: true,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: 0.0,
max: 10.0,
interval: 2,
showLabels: true,
showTicks: true,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
NOTE
- Refer the
numberFormat
anddateFormat
for formatting the numeric and date labels respectively.- Refer the
SfSliderThemeData
for customizing the appearance of the labels.
Number format
The numberFormat
property is used to format the numeric labels. The default value of numberFormat
property is null
.
NOTE
You must import
intl
package for formatting numeric slider using theNumberFormat
class.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: 0.0,
max: 10.0,
value: _value,
interval: 2,
showTicks: true,
showLabels: true,
numberFormat: NumberFormat("\$"),
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: 0.0,
max: 10.0,
value: _value,
interval: 2,
showTicks: true,
showLabels: true,
numberFormat: NumberFormat("\$"),
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Date format
The dateFormat
property is used to format the date labels. It is mandatory for date SfSlider
. For date values, the slider does not have auto interval support. So, it is mandatory to set interval
, dateIntervalType
, and dateFormat
for date values. The default value of dateFormat
property is null
.
NOTE
You must import
intl
package for formatting date slider using theDateFormat
class.
Year format
Horizontal
DateTime _value = DateTime(2002, 01, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2004, 12, 31, 24),
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
DateTime _value = DateTime(2002, 01, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2004, 12, 31, 24),
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Month format
Horizontal
DateTime _value = DateTime(2000, 03, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2000, 09, 01, 24),
value: _value,
interval: 2,
showLabels: true,
showTicks: true,
dateFormat: DateFormat.yM(),
dateIntervalType: DateIntervalType.months,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
DateTime _value = DateTime(2000, 03, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2000, 09, 01, 24),
value: _value,
interval: 2,
showLabels: true,
showTicks: true,
dateFormat: DateFormat.yM(),
dateIntervalType: DateIntervalType.months,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Hour format
Horizontal
DateTime _value = DateTime(2000, 01, 01, 12, 00, 00);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: DateTime(2000, 01, 01, 02, 00, 00),
max: DateTime(2000, 01, 01, 22, 00, 00),
value: _value,
interval: 5,
showLabels: true,
showTicks: true,
dateFormat: DateFormat('h:mm a'),
dateIntervalType: DateIntervalType.hours,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
DateTime _value = DateTime(2000, 01, 01, 12, 00, 00);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: DateTime(2000, 01, 01, 02, 00, 00),
max: DateTime(2000, 01, 01, 22, 00, 00),
value: _value,
interval: 5,
showLabels: true,
showTicks: true,
dateFormat: DateFormat('h:mm a'),
dateIntervalType: DateIntervalType.hours,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
NOTE
Refer the
DateFormat
class for other date format.
Label placement
The labelPlacement
property is used to place the labels either between the major ticks or on the major ticks. The default value of the labelPlacement
property is LabelPlacement.onTicks
.
Horizontal
DateTime _value = DateTime(2002, 01, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2004, 12, 31, 24),
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
labelPlacement: LabelPlacement.betweenTicks,
dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
DateTime _value = DateTime(2002, 01, 01);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: DateTime(2000, 01, 01, 00),
max: DateTime(2004, 12, 31, 24),
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
labelPlacement: LabelPlacement.betweenTicks,
dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Customize label text
You can format or change the whole numeric or date label text using the labelFormatterCallback
. Its arguments are,
- actualValue – either
DateTime
ordouble
based on givenvalue
. - formattedText – If the actual value is
double
, it is formatted bynumberFormat
and if the actual value isDateTime
, it is formatted bydateFormat
.
Horizontal
double _value = 9900.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: 100.0,
max: 10000.0,
value: _value,
showLabels: true,
interval: 9900,
labelFormatterCallback: (dynamic actualValue, String formattedText) {
return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText';
},
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Vertical
double _value = 9900.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: 100.0,
max: 10000.0,
value: _value,
showLabels: true,
interval: 9900,
labelFormatterCallback: (dynamic actualValue, String formattedText) {
return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText';
},
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
)
);
}
Label style
You can change the active and inactive label appearance of the slider using the activeLabelStyle
and inactiveLabelStyle
properties respectively.
The active side of the slider is between the min
value and the thumb.
The inactive side of the slider is between the thumb and the max
value.
NOTE
You must import the
theme.dart
library from theCore
package to useSfSliderTheme
.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic),
inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic),
),
child: SfSlider(
min: 2.0,
max: 10.0,
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
),
)
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic),
inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic),
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
value: _value,
interval: 1,
showLabels: true,
showTicks: true,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
),
)
)
)
);
}
Label offset
You can adjust the space between ticks and labels of the slider using the labelOffset
property.
NOTE
You must import the
theme.dart
library from theCore
package to useSfSliderTheme
.
Horizontal
The default value of labelOffset
property is Offset(0.0, 13.0)
if the showTicks
property is false
.
The default value of labelOffset
property is Offset(0.0, 5.0)
if the showTicks
property is true
.
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
labelOffset: Offset(0.0, 10.0),
),
child: SfSlider(
min: 2.0,
max: 10.0,
value: _value,
interval: 2,
showTicks: true,
showLabels: true,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
),
)
)
)
);
}
Vertical
The default value of labelOffset
property is Offset(13.0, 0.0)
if the showTicks
property is false
.
The default value of labelOffset
property is Offset(5.0, 0.0)
if the showTicks
property is true
.
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
labelOffset: Offset(10.0, 0.0),
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
value: _value,
interval: 2,
showTicks: true,
showLabels: true,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
),
)
)
)
);
}
Show divisors
The showDivisors
property is used to render the divisors on the track. The default value of the showDivisors
property is false
. It is a shape which is used to represent the major interval points of the track.
For example, if min
is 0.0 and max
is 10.0 and interval
is 2.0, the slider will render the divisors at 0.0, 2.0, 4.0 and so on.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 5,
inactiveTrackHeight: 5,
),
child: SfSlider(
min: 0.0,
max: 10.0,
interval: 2,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 5,
inactiveTrackHeight: 5,
),
child: SfSlider.vertical(
min: 0.0,
max: 10.0,
interval: 2,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
)
)
);
}
Divisor radius
You can change the active and inactive divisor radius of the slider using the activeDivisorRadius
and the inactiveDivisorRadius
properties respectively.
NOTE
You must import the
theme.dart
library from theCore
package to useSfSliderTheme
.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 10,
inactiveTrackHeight: 10,
activeDivisorRadius: 5,
inactiveDivisorRadius: 5,
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 10,
inactiveTrackHeight: 10,
activeDivisorRadius: 5,
inactiveDivisorRadius: 5,
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Divisor stroke width and stroke color
You can change the active and inactive divisor stroke width of the slider using the activeDivisorStrokeWidth
and the inactiveDivisorStrokeWidth
properties respectively.
Also, you can change the active and inactive divisor stroke color of the slider using the activeDivisorStrokeColor
and the inactiveDivisorStrokeColor
properties respectively.
NOTE
You must import the
theme.dart
library from theCore
package to useSfSliderTheme
.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 10,
inactiveTrackHeight: 10,
activeDivisorStrokeColor: Colors.red,
activeDivisorStrokeWidth: 2,
inactiveDivisorStrokeWidth: 2,
inactiveDivisorStrokeColor: Colors.red,
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 10,
inactiveTrackHeight: 10,
activeDivisorStrokeColor: Colors.red,
activeDivisorStrokeWidth: 2,
inactiveDivisorStrokeWidth: 2,
inactiveDivisorStrokeColor: Colors.red,
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Divisor color
You can change the active and inactive divisor color of the slider using the activeDivisorColor
and inactiveDivisorColor
properties respectively.
NOTE
You must import the
theme.dart
library from theCore
package to useSfSliderTheme
.
Horizontal
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 5,
inactiveTrackHeight: 5,
activeDivisorColor: Colors.red,
inactiveDivisorColor: Colors.red[200],
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Vertical
double _value = 6.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 5,
inactiveTrackHeight: 5,
activeDivisorColor: Colors.red,
inactiveDivisorColor: Colors.red[200],
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDivisors: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}