SfSlider timezones not supported

[Arconomy]

Hi,

I am trying to use the SFSlider to select a point in time between 2 datetimes. I use the popular timezone package (https://pub.dev/packages/timezone) in my app to manage timezone datetimes. This is a wrapper for the standard DateTime class. The SFSlider throws a runtime error when a TZDateTime object is used as the min and max times.

How I can support timezone datetimes with the SFSlider?

======== Exception caught by widgets library =======================================================

The following NoSuchMethodError was thrown building SfSlider(value: 2023-02-01 13:00:00.000+1000, min: 2023-02-01 12:00:00.000+1000, max: 2023-02-01 13:00:00.000+1000, interval: 30.0, stepSize: null, minorTicksPerInterval: 0, Ticks are showing, Labels are showing, Dividers are not showing, Tooltip is enabled, activeColor: Color(0x62ffffff), inactiveColor: Color(0xff2a2d3e), labelPlacement: onTicks, edgeLabelPlacement: auto, numberFormat: null, dateIntervalType: minutes, dependencies: [Directionality, SfSliderTheme, _InheritedTheme, _LocalizationsScope-[GlobalKey#e0700]], state: _SfSliderState#695cb(tickers: tracking 3 tickers)):

'toDouble'

Dynamic call of null.

Receiver: Instance of 'TZDateTime'

Arguments: []

When the exception was thrown, this was the stack:

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw_

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 768:3 defaultNoSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 61:17 noSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 763:31 noSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 283:12 callNSM

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 294:25 _checkAndCall

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:10 callMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 435:5 dsend

packages/syncfusion_flutter_sliders/src/slider_base.dart 489:46 get actualMax

packages/syncfusion_flutter_sliders/src/slider_base.dart 560:43 get adjustmentUnit

packages/syncfusion_flutter_sliders/src/slider_base.dart 564:22 get semanticActionUnit

packages/syncfusion_flutter_sliders/src/slider.dart 1939:40 get [_increasedValue]

packages/syncfusion_flutter_sliders/src/slider.dart 2300:35 describeSemanticsConfiguration

packages/flutter/src/rendering/object.dart 3102:7 get [_semanticsConfiguration]

Many Thanks

ac

[Yuvaraj Gajaraj]

Hi Arconomy,

We are validating your query at our end and we will update further details in one business day on 17 February 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Lavanya Anaimuthu]

Hi Arconomy,

You can achieve your requirement by converting the TZDateTime value to DateTime as per the following code snippet.

 

SfSlider(

          min: DateTime.fromMillisecondsSinceEpoch(min.millisecondsSinceEpoch),

          max: DateTime.fromMillisecondsSinceEpoch(max.millisecondsSinceEpoch),

          value:

              DateTime.fromMillisecondsSinceEpoch(value.millisecondsSinceEpoch),

          interval: 1,

          showLabels: true,

          dateFormat: DateFormat.y(),

          dateIntervalType: DateIntervalType.years,

          onChanged: (dynamic newValue) {

            setState(() {

              value = newValue;

            });

          },

        ),

 

And we have shared the sample below for your reference and you can change the sample based on your requirement.

Regards,

Lavanya A.

Attachment: f180572_7e4082d6.zip

[Arconomy]

Please can you recommend a solution for the SFSlider to enabled the slider intervals to be correctly aligned for a specific timezone.

The labels for the slider are set based on the 'local' timezone. This means that if the tooltip is converted into the required timezone using the tooltipTextFormatterCallback then the tooltip datetimes will not align with the slider labels.

Converting the labels using onLabelCreated does not resolve this issue as the intervals are set based on the local timezone therefore in the local time zone midnight might be a number of hours before/after the required timezone.

For example sliding between 1 May and 2 May the tooltip will display dates for the 2 May before the slider reaches the 2 May interval.

I have attached a working demo that illustrates the problem. 

Many Thanks

ac

Attachment: slider_tz_aad3f4b1.zip

[Praveen Balu]

Hi Arconomy,

We have validated the shared sample and observed that the tooltip and axis label were not in sync. In SfSlider, there is no direct timezone support at the source level. However, we have prepared a workaround sample to align the tooltip text and axis label as sample level solution.

The mismatch of tooltip text and axis label occurred because only the day number [April 1] was displayed in axis labels, rather than the full DateTime value [April 1 19:30]. As a result, the tooltip value did not accurately reflect to the corresponding axis labels.

To resolve this issue, we removed the time zone based DateTime conversion logic from both the tooltipTextFormatterCallback and onLabelCreated callbacks. Instead, we performed the DateTime conversion using the timeZoneOffset within the initState method and directly assigned the converted values to the min and max properties of the SfSlider.

Note: For converting to TZDateTime, we have used 'Europe/London' as the location you shared in this workaround sample. This workaround sample works for all time zone based DateTime values.

void _initializeTimezones() {

    final DateTime min = DateTime(2025, 4, 1, 8, 30, 0);

    final DateTime max = DateTime(2025, 6, 10, 15, 45, 0);

    _location = tz.getLocation('Europe/London');

    _tzMin = tz.TZDateTime.from(min, _location);

    _tzMax = tz.TZDateTime.from(max, _location);

    _tzValue = tz.TZDateTime.from(DateTime(2025, 5, 1, 12, 0, 0), _location);

    _calculateTimezoneOffsetDifference(min, _tzMin);

  }

 

  // Calculate the time difference between standard DateTime and timezone-aware DateTime

  void _calculateTimezoneOffsetDifference(

    DateTime dateTime,

    DateTime tzDateTime,

  ) {

    _timeDifference = dateTime.timeZoneOffset - tzDateTime.timeZoneOffset;

 

    // Convert London DateTime to local DateTime by reducing the timezone offset

    _convertedMinDate = _convertTzDateTimeToDateTime(

      _tzMin,

    ).subtract(_timeDifference);

    _convertedMaxDate = _convertTzDateTimeToDateTime(

      _tzMax,

    ).subtract(_timeDifference);

 

    _convertedValueDate = _convertTzDateTimeToDateTime(_tzValue);

  }

 

  DateTime _convertTzDateTimeToDateTime(DateTime dateTime) {

    return DateTime.fromMillisecondsSinceEpoch(dateTime.millisecondsSinceEpoch);

  }

SfSlider(

  min: _convertedMinDate,

  max: _convertedMaxDate,

  value: _convertedValueDate,

  …

),

With this approach, the DateTime values are adjusted before the interval calculations take place in sliders. This ensures that the axis intervals are computed based on the converted time, allowing the axis labels to render with the correct starting time of the day [Apr 1 00:00]. As a result, the tooltip value is now perfectly synchronized with the axis labels.

We have attached the sample and demo for your reference, and you can modify the sample, based on your requirements.

Regards,

Praveen Balu.

Attachment: forum_180572_af9148e9.zip

[Arconomy]

Great solution. Thanks for your help.

[Praveen Balu]

Hi Arconomy,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Praveen Balu.