Incorrect Display of Slider Label (Web)

[wjkoh]

When the device preview feature is enabled, the label of a slider widget is displayed at an inaccurate position, as shown in the screenshot below. Interestingly, the relative position of the label changes based on the size of the current window.

A screen recording demonstrating the issue with and without device preview can be found at the following link: https://youtu.be/P9u6b7zxi7A.

To reproduce the issue, please refer to the minimal code provided below.

import 'package:flutter/material.dart';
import 'package:device_preview/device_preview.dart';

void main() async {
  runApp(
    DevicePreview(
      enabled: true,
      tools: DevicePreview.defaultTools,
      builder: (context) => const FooApp(),
    ),
  );
}

class FooApp extends StatelessWidget {
  const FooApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: SliderWidget(),
      ),
    );
  }
}

class SliderWidget extends StatefulWidget {
  const SliderWidget({super.key});

  @override
  State<SliderWidget> createState() => _SliderWidgetState();
}

class _SliderWidgetState extends State<SliderWidget> {
  double x = 30.0;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: x,
      min: 1,
      max: 30,
      divisions: 58,
      label: x.round().toString(),
      onChanged: (double value) {
        setState(() {
          x = value;
        });
      },
    );
  }
}

Flutter doctor:

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.4, on macOS 14.2 23C64 darwin-arm64, locale en-US)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

[Guru-Zachw]

Happened to me on Linux also