onLabelCreated property

RangeSelectorLabelCreatedCallback? onLabelCreated
final

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;