Labels and Dividers in Flutter Treemap (SfTreemap)
20 Oct 202224 minutes to read
This section explains about how to add the labels and dividers 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
numberFormatanddateFormatfor formatting the numeric and date labels respectively.- Refer the
SfSliderThemeDatafor 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
intlpackage for formatting numeric slider using theNumberFormatclass.
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
intlpackage for formatting date slider using theDateFormatclass.
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
DateFormatclass 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
DateTimeordoublebased on givenvalue. - formattedText – If the actual value is
double, it is formatted bynumberFormatand 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.dartlibrary from theCorepackage 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.dartlibrary from theCorepackage 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 dividers
The showDividers property is used to render the dividers on the track. The default value of the showDividers 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 dividers 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,
showDividers: 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,
showDividers: true,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
)
)
);
}
Divider radius
You can change the active and inactive divider radius of the slider using the activeDividerRadius and the inactiveDividerRadius properties respectively.
NOTE
You must import the
theme.dartlibrary from theCorepackage 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,
activeDividerRadius: 5,
inactiveDividerRadius: 5,
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: 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,
activeDividerRadius: 5,
inactiveDividerRadius: 5,
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Divider stroke width and stroke color
You can change the active and inactive divider stroke width of the slider using the activeDividerStrokeWidth and the inactiveDividerStrokeWidth properties respectively.
Also, you can change the active and inactive divider stroke color of the slider using the activeDividerStrokeColor and the inactiveDividerStrokeColor properties respectively.
NOTE
You must import the
theme.dartlibrary from theCorepackage 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,
activeDividerStrokeColor: Colors.red,
activeDividerStrokeWidth: 2,
inactiveDividerStrokeWidth: 2,
inactiveDividerStrokeColor: Colors.red,
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: 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,
activeDividerStrokeColor: Colors.red,
activeDividerStrokeWidth: 2,
inactiveDividerStrokeWidth: 2,
inactiveDividerStrokeColor: Colors.red,
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}
Divider color
You can change the active and inactive divider color of the slider using the activeDividerColor and inactiveDividerColor properties respectively.
NOTE
You must import the
theme.dartlibrary from theCorepackage 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,
activeDividerColor: Colors.red,
inactiveDividerColor: Colors.red[200],
),
child: SfSlider(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: 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,
activeDividerColor: Colors.red,
inactiveDividerColor: Colors.red[200],
),
child: SfSlider.vertical(
min: 2.0,
max: 10.0,
interval: 1,
showDividers: true,
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
)
)
)
)
);
}