SfSlider class Null safety

A Material Design slider.

Used to select a value between min and max. It supports horizontal and vertical orientations. It also supports both numeric and date values.

The slider elements are:

  • The "track", which is the rounded rectangle in which the thumb is slides over.
  • The "thumb", which is a shape that slides horizontally when the user drags it.
  • The "active" side of the slider is between the min value and thumb.
  • The "inactive" side of the slider is between the thumb and the max value.
  • The "dividers", which is a shape that renders on the track based on the given interval value.
  • The "ticks", which is a shape that rendered based on given interval value. Basically, it is rendered below the track. It is also called “major ticks”.
  • The "minor ticks", which is a shape that renders between two major ticks based on given minorTicksPerInterval value. Basically, it is rendered below the track.
  • The "labels", which is a text that rendered based on given interval value. Basically, it is rendered below the track and the major ticks.

The slider will be disabled if onChanged is null or min is equal to max.

The slider widget doesn’t maintains any state. Alternatively, the widget calls the onChanged callback with a new value when the state of slider changes. To update the slider’s visual appearance with a new value, rebuilds the slider with a new value.

Slider can be customized using the SfSliderTheme with the help of SfSliderThemeData, or the SfTheme with the help of SfThemeData. It is also possible to override the appearance using SfSliderThemeData which were set using the properties of the widget like activeColor and inactiveColor.

Example

This snippet shows how to create a numeric SfSlider.

double _value = 4.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
     home: Scaffold(
         body: Center(
             child: SfSlider(
                    min: 0.0,
                    max: 10.0,
                    value: _value,
                    onChanged: (dynamic newValue) {
                        setState(() {
                            _value = newValue;
                        });
                  },
             )
          )
      )
  );
}

This snippet shows how to create a date SfSlider.

DateTime _value = DateTime(2002, 01, 01);

SfSlider(
 min: DateTime(2000, 01, 01, 00),
 max: DateTime(2005, 12, 31, 24),
 value: _value,
 interval: 1,
 dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
 onChanged: (dynamic newValue) {
   setState(() {
     _value = newValue;
   });
 },
)

See also:

Inheritance

Constructors

SfSlider({Key? key, dynamic min = 0.0, dynamic max = 1.0, required dynamic value, required ValueChanged? onChanged, double? interval, double? stepSize, SliderStepDuration? stepDuration, int minorTicksPerInterval = 0, bool showTicks = false, bool showLabels = false, bool showDividers = false, bool enableTooltip = false, Color? activeColor, Color? inactiveColor, LabelPlacement labelPlacement = LabelPlacement.onTicks, NumberFormat? numberFormat, DateFormat? dateFormat, DateIntervalType? dateIntervalType, LabelFormatterCallback? labelFormatterCallback, TooltipTextFormatterCallback? tooltipTextFormatterCallback, SfSliderSemanticFormatterCallback? semanticFormatterCallback, SfTrackShape trackShape = const SfTrackShape(), SfDividerShape dividerShape = const SfDividerShape(), SfOverlayShape overlayShape = const SfOverlayShape(), SfThumbShape thumbShape = const SfThumbShape(), SfTickShape tickShape = const SfTickShape(), SfTickShape minorTickShape = const SfMinorTickShape(), SfTooltipShape tooltipShape = const SfRectangularTooltipShape(), Widget? thumbIcon})
Creates a horizontal SfSlider.
const
SfSlider.vertical({Key? key, dynamic min = 0.0, dynamic max = 1.0, required dynamic value, required ValueChanged? onChanged, double? interval, double? stepSize, SliderStepDuration? stepDuration, int minorTicksPerInterval = 0, bool showTicks = false, bool showLabels = false, bool showDividers = false, bool enableTooltip = false, Color? activeColor, Color? inactiveColor, LabelPlacement labelPlacement = LabelPlacement.onTicks, NumberFormat? numberFormat, DateFormat? dateFormat, DateIntervalType? dateIntervalType, LabelFormatterCallback? labelFormatterCallback, TooltipTextFormatterCallback? tooltipTextFormatterCallback, SfSliderSemanticFormatterCallback? semanticFormatterCallback, SfTrackShape trackShape = const SfTrackShape(), SfDividerShape dividerShape = const SfDividerShape(), SfOverlayShape overlayShape = const SfOverlayShape(), SfThumbShape thumbShape = const SfThumbShape(), SfTickShape tickShape = const SfTickShape(), SfTickShape minorTickShape = const SfMinorTickShape(), SfTooltipShape tooltipShape = const SfRectangularTooltipShape(), Widget? thumbIcon, SliderTooltipPosition tooltipPosition = SliderTooltipPosition.left})
Creates a vertical SfSlider. [...]
const

Properties

activeColor Color?
Color applied to the active track, thumb, overlay, and inactive dividers. [...]
final
dateFormat DateFormat?
Formats the date labels. It is mandatory for date SfSlider. [...]
final
dateIntervalType DateIntervalType?
The type of date interval. It is mandatory for date SfSlider. [...]
final
dividerShape SfDividerShape
Base class for SfSlider dividers shapes.
final
enableTooltip bool
Option to enable tooltip for the thumb. [...]
final
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
inactiveColor Color?
Color applied to the inactive track and active dividers. [...]
final
interval double?
Splits the slider into given interval. It is mandatory if labels, major ticks and dividers are needed. [...]
final
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
labelFormatterCallback LabelFormatterCallback?
Signature for formatting or changing the whole numeric or date label text. [...]
final
labelPlacement LabelPlacement
Option to place the labels either between the major ticks or on the major ticks. [...]
final
max → dynamic
The maximum value that the user can select. [...]
final
min → dynamic
The minimum value that the user can select. [...]
final
minorTickShape SfTickShape
Base class for SfSlider minor tick shapes.
final
minorTicksPerInterval int
Number of smaller ticks between two major ticks. [...]
final
numberFormat NumberFormat?
Formats the numeric labels. [...]
final
onChanged ValueChanged?
Called when the user is selecting a new value for the slider by dragging. [...]
final
overlayShape SfOverlayShape
Base class for SfSlider overlay shapes.
final
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
semanticFormatterCallback SfSliderSemanticFormatterCallback?
The callback used to create a semantic value from the slider's value. [...]
final
showDividers bool
Option to render the dividers on the track. [...]
final
showLabels bool
Option to render the labels on given interval. [...]
final
showTicks bool
Option to render the major ticks on the track. [...]
final
stepDuration SliderStepDuration?
Option to select discrete date values. [...]
final
stepSize double?
Option to select discrete value. [...]
final
thumbIcon Widget?
Sets the widget inside the thumb. [...]
final
thumbShape SfThumbShape
Base class for SfSlider thumb shapes.
final
tickShape SfTickShape
Base class for SfSlider major tick shapes.
final
tooltipShape SfTooltipShape
Renders rectangular or paddle shape tooltip. [...]
final
tooltipTextFormatterCallback TooltipTextFormatterCallback?
Signature for formatting or changing the whole tooltip label text. [...]
final
trackShape SfTrackShape
Base class for SfSlider track shapes.
final
value → dynamic
The value currently selected in the slider. [...]
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
createState() → _SfSliderState
Creates the mutable state for this widget at a given location in the tree. [...]
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object. [...]
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited