Tooltip graphics for the slider is corrupted only with SfPaddleTooltipShape

[arbaz-shaikh-077]

Bug description

My app is targeting Linux desktop users and I have created the volume setter with the slider. The problem is, When I use the tooltipShape with SfPaddleTooltipShape the graphic for the tooltip gets corrupted but when I use the SfRectangularTooltipShape it works correctly.

Steps to reproduce

1. Run the example code
2. Try to move the slider

Code sample

Code sample

class SinkList extends StatefulWidget {
  @override
  State<SinkList> createState() => _SinkListState();
}

class _SinkListState extends State<SinkList> {
  ValueNotifier<int> currentAudioVolume = ValueNotifier(0);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              flex: 5,
              child: Text(
                "Output Card",
                style: fontStyleMedium.copyWith(fontSize: 4.sp),
              ),
            ),
            Expanded(
              flex: 5,
              child: ValueListenableBuilder<int>(
                  valueListenable: currentAudioVolume,
                  builder: (_, volume, __) {
                    return SfSliderTheme(
                      data: SfSliderThemeData(
                        thumbRadius: MediaQuery.of(context).size.width <= 3840
                            ? 10.r
                            : 15.r,
                        overlayRadius: MediaQuery.of(context).size.width <= 3840
                            ? 20.r
                            : 40.r,
                        tooltipTextStyle: TextStyle(
                          color: Colors.white,
                          fontSize: 4.sp,
                        ),
                      ),
                      child: SfSlider(
                        value: volume,
                        enableTooltip: true,
                        tooltipShape: const SfPaddleTooltipShape(),
                        onChangeEnd: (value) async {},
                        onChanged: (newVal) async {
                          currentAudioVolume.value = newVal.toInt();
                        },
                        min: 0,
                        max: 100,
                      ),
                    );
                  }),
            ),
          ],
        )
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Stack Traces

Stack Traces

Nothing is displayed on the console

On which target platforms have you observed this bug?

Linux

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.3, on Ubuntu 22.04.4 LTS 6.8.0-40-generic,
    locale en_IN)
    • Flutter version 3.19.3 on channel stable at
      /home/subhash/Downloads/flutter_linux_3.10.5-stable/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (6 months ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/subhash/Android/Sdk
    • Platform android-35, build-tools 34.0.0
    • Java binary at: /snap/android-studio/161/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.10+0-17.0.10b1087.21-11609105)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1.1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2024.1)
    • Android Studio at /snap/android-studio/161
    • Flutter plugin version 80.0.2
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.10+0-17.0.10b1087.21-11609105)

[✓] Android Studio (version 2023.3)
    • Android Studio at /snap/android-studio/157
    • Flutter plugin version 80.0.1
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.92.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.96.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.4 LTS
      6.8.0-40-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 127.0.6533.119

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[Baranibharathip]

Hi @arbaz-shaikh-077 ,

We are able to replicate the reported issue regarding paddle tooltip is not rendering properly in slider when the tooltip size is greater than parent widget at our end and have logged bug report for it in our feedback portal. We will fix and include the changes in our weekly patch release which is expected to be rolled out on October 15, 2024 . We will update you here once the release is rolled out and we appreciate your patience until then. You can also track the status of the bug with the feedback below.

Feedback link : https://www.syncfusion.com/feedback/61614/paddle-tooltip-is-not-rendering-properly-in-slider-when-the-tooltip-size-is

Regards,
Baranibharathi P.

[ThilipChandru]

Hi @arbaz-shaikh-077 ,

The reported issue has been fixed and rolled out in our Weekly patch release. To avoid this issue, we kindly request that you upgrade the syncfusion_flutter_sliders package to the latest version below.

Version : https://pub.dev/packages/syncfusion_flutter_sliders/versions/27.1.53

Root cause: The tooltip's size was miscalculated due to incorrect dimensions based on the slider track size. This caused the tooltip's position to be incorrectly adjusted, leading to rendering issues.

Regards,
Thilip Chandru.

[LavanyaGowtham2021]

Please reopen this ticket if you need further assistance on this.