Skip to content

Slider thumb doesn't respect round slider track shape #149591

@TahaTesser

Description

@TahaTesser

Steps to reproduce

Slider Thumb and round track shape has bunch of issues.

  1. When dragging the thumb to the start or end of the track in a rounded track shape, the thumb exists the rounded slider track shape and doesn't maintain rounded corners.

Actual results

Start End

Expected results

Start End
  1. Active track doesn't be show be drawn if the thumb is at the start of the rounded track shape and it's radius lower than track radius. Likewise, inactive track shouldn't be drawn if the thumb is at the end of the rounded track shape.

Actual results

Start End

Expected results

Start End
  1. All corners in active and inactive tracks segments should be rounded in a rounded track shape.

Actual results

Active track corners

Screenshot 2024-06-03 at 16 02 45

Inactive track corners

Screenshot 2024-06-03 at 16 02 59

Expected results

Active track corners

Screenshot 2024-06-03 at 16 03 18

Inactive track corner

Screenshot 2024-06-03 at 16 03 10

Expected results

~

Actual results

~

Code sample

Code sample
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        sliderTheme: const SliderThemeData(
          trackHeight: 32,
          thumbColor: Colors.green,
          // thumbColor: Colors.green.withOpacity(0.5),
          // activeTrackColor: Colors.red.withOpacity(0.5),
          inactiveTrackColor: Colors.amber,
          trackShape: RoundedRectSliderTrackShape(),
        ),
      ),
      home: Scaffold(
        body: Slider(
          value: _value,
          // divisions: 5,
          // label: _value.toStringAsFixed(2),
          // ignore: avoid_redundant_argument_values
          min: 0,
          max: 10,
          onChanged: (double value) {
            setState(() {
              _value = value;
            });
          },
        ),
      ),
    );
  }
}


Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.found in release: 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions