Labels and Dividers in Flutter Treemap (SfTreemap)

18 Jun 202124 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;
                });
              },
            ),
          )
      )
  );
}

Slider label support

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;
                });
              },
            ),
          )
      )
  );
}

Slider label support

NOTE

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 the NumberFormat 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;
                });
              },
            ),
          )
      )
  );
}

Number format support

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;
                });
              },
            ),
          )
      )
  );
}

Number format support

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 the DateFormat 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;
                });
              },
            ),
          )
      )
  );
}

Year date format support

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;
                });
              },
            ),
          )
      )
  );
}

Year date format support

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;
                });
              },
            ),
          )
      )
  );
}

Month date format support

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;
                });
              },
            ),
          )
      )
  );
}

Month date format support

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;
                });
              },
            ),
          )
      )
  );
}

Hour date format support

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;
                });
              },
            ),
          )
      )
  );
}

Hour date format support

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;
                });
              },
            ),
          )
      )
  );
}

Label placement support

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;
                });
              },
            ),
          )
      )
  );
}

Label placement support

Customize label text

You can format or change the whole numeric or date label text using the labelFormatterCallback. Its arguments are,

  • actualValue – either DateTime or double based on given value.
  • formattedText – If the actual value is double, it is formatted by numberFormat and if the actual value is DateTime, it is formatted by dateFormat.

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;
                });
              },
            ),
          )
      )
  );
}

Label formatter support

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 formatter support

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 the Core package to use SfSliderTheme.

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;
                    });
                  },
                ),
              )
          )
      )
  );
}

Labels style support

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;
                    });
                  },
                ),
              )
          )
      )
  );
}

Labels style support

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 the Core package to use SfSliderTheme.

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;
                    });
                  },
                ),
              )
          )
      )
  );
}

Labels offset support

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;
                    });
                  },
                ),
              )
          )
      )
  );
}

Labels offset support

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;
                  });
                },
              ),
            ),
          )
      )
  );
}

Slider divider support

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;
                  });
                },
              ),
            ),
          )
      )
  );
}

Slider divider support

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.dart library from the Core package to use SfSliderTheme.

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;
                      });
                    },
                  )
              )
          )
      )
  );
}

Divider radius support

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 radius support

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.dart library from the Core package to use SfSliderTheme.

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;
                      });
                    },
                  )
              )
          )
      )
  );
}

Divider stroke width and color support

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 stroke width and color support

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.dart library from the Core package to use SfSliderTheme.

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;
                      });
                    },
                  )
              )
          )
      )
  );
}

Divider color support

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;
                      });
                    },
                  )
              )
          )
      )
  );
}

Divider color support