Add Material 3 support for Slider - Part 2

[TahaTesser]

Closes #111451

Description

This PR adds Material 3 value indicator shape to Slider.

1. There is no official name that I could find for the M3 value indicator so I decided to call it DropSliderValueIndicatorShape as it resembles a water drop. (M2 value indicator is RectangularSliderValueIndicatorShape and it looks like a rectangular box).

2. DropSliderValueIndicatorShape is based on existing code from RectangularSliderValueIndicatorShape.

3. Added tests to check the default value indicator.

code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.light,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: const Color(0xff6750a4),
        sliderTheme: const SliderThemeData(
          showValueIndicator: ShowValueIndicator.always,
        ),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: const Color(0xff6750a4),
        sliderTheme: const SliderThemeData(
          showValueIndicator: ShowValueIndicator.always,
        ),
      ),
      home: const SliderExample(),
    );
  }
}

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

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double sliderValue1 = 0.0;
  double sliderValue2 = 100.0;
  double sliderValue3 = 0.0;
  double sliderValue4 = 10.0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Slider(
            value: sliderValue1,
            max: 11,
            label: sliderValue1.round().toString(),
            onChanged: (double value) {
              setState(() {
                sliderValue1 = value;
              });
            },
          ),
          const SizedBox(height: 50),
          Slider(
            value: sliderValue2,
            min: 100,
            max: 500,
            divisions: 50,
            label: sliderValue2.round().toString(),
            onChanged: (double value) {
              setState(() {
                sliderValue2 = value;
              });
            },
          ),
          const SizedBox(height: 50),
          Slider(
            value: sliderValue3,
            max: 5.74,
            divisions: 23,
            label: sliderValue3.toStringAsFixed(2),
            onChanged: (double value) {
              setState(() {
                sliderValue3 = value;
              });
            },
          ),
          const SizedBox(height: 50),
          Slider(
            value: sliderValue4,
            min: 10,
            max: 50,
            divisions: 20,
            label: '${sliderValue4.toStringAsFixed(1)}K',
            onChanged: (double value) {
              setState(() {
                sliderValue4 = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

Preview

Flutter

Single digit	Triple digits	With decimals	Longer value

Android

Single digit	Triple digits	With decimals	Longer value

Filing as a draft to confirm the implementation and the name.
Once confirmed I will add golden tests under test/material/value_indicating_slider_test.dart.
Done.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[Piinks]

@TahaTesser it looks like this triple digit one has clipping along the bottom of the digits, can you take a look?

[TahaTesser]

@TahaTesser it looks like this triple digit one has clipping along the bottom of the digits, can you take a look?

Great catch! Just fixed

[Piinks]

I think this looks great! I am checking in with @darrenaustin about the question on the drop name. 🙂 💧

[TahaTesser]

@Piinks it was just first name that popped in my head as I was expecting something more official from team.

Another name idea is 'PinValueIndicatorShape' as it looks like map pin (naming is difficult 😀)

[Piinks]

(naming is difficult 😀)

I hear that! Always a struggle for me. :)

[TahaTesser]

In my Android testing, I notice this particular shape in Slider is called TooltipDrawable but it sounds very generic and might be confused with tooltip widget shape.

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #114624 at sha 964bb91

[TahaTesser]

Added golden tests, this is ready for review.

[Piinks]

There aren't any images showing up, I wonder if it is because all of the commits here are forced pushed. Can you create a second commit and push it? I see there are 60 images on the backend, but they are all attributed to the same patchset, which may be causing the issue. I will be able to follow up with the Gold team tomorrow.

https://flutter-gold.skia.org/json/v1/changelist_summary/github/114624

[darrenaustin]

[darrenaustin]

I was going to say that the theme file is an odd place for this, but given that all the other shapes are defined in this file it would be good to keep them together. I think the name is fine. I checked with the Material team and they didn't seem to have a canonical name that we could find, so DropSliderValueIndicatorShape it is 😎.

[TahaTesser]

Appreciate it!

[darrenaustin]

Nice.

[TahaTesser]

Can you create a second commit and push it?

Sure! just pushed an empty commit.

[flutter-dashboard]

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #114624 at sha 93f327a

[Piinks]

That worked! Thanks! Can you take a peek and see if they look as expected?

https://flutter-gold.skia.org/search?issue=114624&crs=github&patchsets=2&corpus=flutter

Any text is swapped out for little boxes, that is expected

[TahaTesser]

There seems to be a drawing bug in the HTML renderer where the drawing order doesn't render Path after RRect but Canvaskit renders fine regardless of the order.

Notice this in the golden images.

Updating the drawing order fixes the issue.

Before	Fix

[flutter-dashboard]

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #114624 at sha bf6163e

[Piinks]