onLabelCreated property
Signature for customizing the text and style of numeric or date labels.
- The actual value without formatting is given by
actualValue
. It is either DateTime or double based on given initialValues or controller start and end values. - The formatted value based on the numeric or date format is given by
formattedText
. - Text styles can be applied to individual labels using the
textStyle
property.
This snippet shows how to format and style labels in SfRangeSelector.
SfRangeValues _initialValues = const SfRangeValues(3.0, 7.0); SfRangeSelector( min: 3.0, max: 8.0, initialValues: _initialValues, interval: 1, showLabels: true, onChanged: (SfRangeValues newValues) { setState(() { _initialValues = newValues; }); }, onLabelCreated: ( dynamic actualValue, String formattedText, TextStyle textStyle, ) { final int value = actualValue.toInt(); final int startIndex = _initialValues.start.toInt(); final int endIndex = _initialValues.end.toInt(); return RangeSelectorLabel( text: value == startIndex || value == endIndex ? '$formattedText' : '$actualValue', textStyle: value == startIndex || value == endIndex ? const TextStyle( color: Colors.purple, fontSize: 18, fontWeight: FontWeight.bold, ) : textStyle, ); }, child: Container( height: 200, color: Colors.green[100], ), )
Implementation
final RangeSelectorLabelCreatedCallback? onLabelCreated;