SfRangeSelector class

A Material Design range selector.

Used to select a range between min and max. It supports both numeric and date ranges. It accepts any type of framework widget or custom widget like SfChart as a child.

The range selector elements are:

The "track", which is the rounded rectangle in which the thumbs are slides over.
The "thumb", which is a shape that slides horizontally when the user drags it.
The "active" side of the range selector is between the left and right thumbs.
The "inactive" side of the range selector is between the min value and the left thumb, and the right thumb and the max value. For RTL, the inactive side of the range selector is between the max value and the left thumb, and the right thumb and the min 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 "child", which can be any type of framework widget or custom widget like SfChart as a child.

Either controller or initialValues need to be set to render SfRangeSelector.

The range selector will be disabled if enabled is false or min is equal to max.

The range selector widget maintains state internally. So, the widget calls the onChanged callback with the new values when the state of range selector changes.

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

Example

This snippet shows how to create a numeric SfRangeSelector.

SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

SfRangeSelector(
    min: 0.0,
    max: 10.0,
    initialValues: _initialValues,
    interval: 1,
    showTicks: true,
    showLabels: true,
    child: Container(
        height: 200,
        color: Colors.green[100],
    ),
)

This snippet shows how to create a date SfRangeSelector.

SfRangeValues _initialValues = SfRangeValues(
     DateTime(2002, 12, 31, 24), DateTime(2003, 12, 31, 24));

SfRangeSelector(
    min: DateTime(2000, 01, 01, 00),
    max: DateTime(2005, 12, 31, 24),
    initialValues: _initialValues,
    interval: 1,
    dateFormat: DateFormat.y(),
    dateIntervalType: DateIntervalType.years,
    child: Container(
        height: 200,
        color: Colors.green[100],
    ),
)

Constructors

SfRangeSelector({Key? key, dynamic min = 0.0, dynamic max = 1.0, SfRangeValues? initialValues, ValueChanged<SfRangeValues>? onChanged, ValueChanged<SfRangeValues>? onChangeStart, ValueChanged<SfRangeValues>? onChangeEnd, RangeController? controller, bool enabled = true, double? interval, double? stepSize, SliderStepDuration? stepDuration, int deferredUpdateDelay = 500, int minorTicksPerInterval = 0, bool showTicks = false, bool showLabels = false, bool showDividers = false, bool enableTooltip = false, bool shouldAlwaysShowTooltip = false, bool enableIntervalSelection = false, bool enableDeferredUpdate = false, SliderDragMode dragMode = SliderDragMode.onThumb, Color? inactiveColor, Color? activeColor, LabelPlacement labelPlacement = LabelPlacement.onTicks, EdgeLabelPlacement edgeLabelPlacement = EdgeLabelPlacement.auto, NumberFormat? numberFormat, DateFormat? dateFormat, DateIntervalType? dateIntervalType, LabelFormatterCallback? labelFormatterCallback, TooltipTextFormatterCallback? tooltipTextFormatterCallback, RangeSelectorSemanticFormatterCallback? 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? startThumbIcon, Widget? endThumbIcon, required Widget child}): Creates a SfRangeSelector.
const

Properties

activeColor → Color?: Color applied to the active track, thumb, overlay, and inactive dividers.
final
child → Widget: The content of range selector.
final
controller → RangeController?: Coordinates between SfRangeSelector and the widget which listens to it.
final
dateFormat → DateFormat?: Formats the date labels. It is mandatory for date SfRangeSelector.
final
dateIntervalType → DateIntervalType?: The type of date interval. It is mandatory for date SfRangeSelector.
final
deferredUpdateDelay → int: Customize the delay duration when enableDeferredUpdate is true.
final
dividerShape → SfDividerShape: Base class for SfRangeSelector dividers shapes.
final
dragMode → SliderDragMode: Represents the behavior of thumb dragging in the SfRangeSelector.
final
edgeLabelPlacement → EdgeLabelPlacement: Position of the edge labels.
final
enabled → bool: Controls the range selector’s state whether it is disabled or enabled.
final
enableDeferredUpdate → bool: Defers the range update.
final
enableIntervalSelection → bool: Option to select the particular interval based on the position of the tap or click.
final
enableTooltip → bool: Option to enable tooltips for both the thumbs.
final
endThumbIcon → Widget?: Sets the widget inside the right thumb.
final
hashCode → int: The hash code for this object.
no setterinherited
inactiveColor → Color?: Color applied to the inactive track and active dividers.
final
initialValues → SfRangeValues?: The values that initially selected in the range selector.
final
interval → double?: Splits the range selector 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.
finalinherited
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 the user can select.
final
min → dynamic: The minimum value the user can select.
final
minorTickShape → SfTickShape: Base class for SfRangeSelector minor tick shapes.
final
minorTicksPerInterval → int: Number of smaller ticks between two major ticks.
final
numberFormat → NumberFormat?: Formats the numeric labels.
final
onChanged → ValueChanged<SfRangeValues>?: Called when the user is selecting a new values for the selector by dragging.
final
onChangeEnd → ValueChanged<SfRangeValues>?: The onChangeEnd callback will be called when the user ends tap or drag the range selector.
final
onChangeStart → ValueChanged<SfRangeValues>?: The onChangeStart callback will be called when the user starts to tap or drag the range selector. This callback is only used to notify the user about the start interaction and it does not update the range selector value.
final
overlayShape → SfOverlayShape: Base class for SfRangeSelector overlay shapes.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
semanticFormatterCallback → RangeSelectorSemanticFormatterCallback?: The callback used to create a semantic value from the selector's values.
final
shouldAlwaysShowTooltip → bool: Option to show tooltip always in range selector.
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
startThumbIcon → Widget?: Sets the widget inside the left thumb.
final
stepDuration → SliderStepDuration?: Option to select discrete date values.
final
stepSize → double?: Option to select discrete values.
final
thumbShape → SfThumbShape: Base class for SfRangeSelector thumb shapes.
final
tickShape → SfTickShape: Base class for SfRangeSelector 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 SfRangeSelector track shapes.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SfRangeSelector>: 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.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent 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, int wrapWidth = 65}) → 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.
inherited