Updated Material 3 Slider Samples (#159795)

Fixes [Update `Slider` samples for updated Material 3 Slider
spec](https://github.com/flutter/flutter/issues/159794)

### Description

This updates Slider sample to include toggle to opt in to the updated
Material 3 appearance . Remove redundant sample an asset diagram.

### Preview

<img width="840" alt="Screenshot 2024-12-04 at 16 03 47"
src="https://github.com/user-attachments/assets/b6db9efe-8416-460e-a745-bdf37c97ed61">


## Pre-launch Checklist

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

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

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

examples/api/lib/material/slider/slider.0.dart

@@ -5,11 +5,12 @@
 import 'package:flutter/material.dart';
 
 /// Flutter code sample for [Slider].
+/// set to false.
 
-void main() => runApp(const SliderApp());
+void main() => runApp(const SliderExampleApp());
 
-class SliderApp extends StatelessWidget {
+class SliderExampleApp extends StatelessWidget {
-  const SliderApp({super.key});
+  const SliderExampleApp({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -28,21 +29,51 @@ class SliderExample extends StatefulWidget {
 
 class _SliderExampleState extends State<SliderExample> {
   double _currentSliderValue = 20;
+  double _currentDiscreteSliderValue = 60;
+  bool year2023 = true;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Slider')),
-      body: Slider(
+      body: Center(
-        value: _currentSliderValue,
+        child: Column(
-        max: 100,
+          mainAxisAlignment: MainAxisAlignment.center,
-        divisions: 5,
+          spacing: 16,
-        label: _currentSliderValue.round().toString(),
+          children: <Widget>[
-        onChanged: (double value) {
+            Slider(
-          setState(() {
+              year2023: year2023,
-            _currentSliderValue = value;
+              value: _currentSliderValue,
-          });
+              max: 100,
-        },
+              onChanged: (double value) {
+                setState(() {
+                  _currentSliderValue = value;
+                });
+              },
+            ),
+            Slider(
+              year2023: year2023,
+              value: _currentDiscreteSliderValue,
+              max: 100,
+              divisions: 5,
+              label: _currentDiscreteSliderValue.round().toString(),
+              onChanged: (double value) {
+                setState(() {
+                  _currentDiscreteSliderValue = value;
+                });
+              },
+            ),
+            SwitchListTile(
+              value: year2023,
+              title: year2023 ? const Text('Switch to latest M3 style') : const Text('Switch to year2023 M3 style'),
+              onChanged: (bool value) {
+                setState(() {
+                  year2023 = !year2023;
+                });
+              },
+            ),
+          ],
+        ),
       ),
     );
   }

examples/api/lib/material/slider/slider.1.dart

@@ -13,12 +13,8 @@ class SliderApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    return const MaterialApp(
-      theme: ThemeData(
+      home: SliderExample(),
-        colorSchemeSeed: const Color(0xff6750a4),
-        useMaterial3: true,
-      ),
-      home: const SliderExample(),
     );
   }
 }
@@ -31,22 +27,36 @@ class SliderExample extends StatefulWidget {
 }
 
 class _SliderExampleState extends State<SliderExample> {
-  double _currentSliderValue = 20;
+  double _currentSliderPrimaryValue = 0.2;
+  double _currentSliderSecondaryValue = 0.5;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Slider')),
-      body: Slider(
+      body: Column(
-        value: _currentSliderValue,
+        mainAxisAlignment: MainAxisAlignment.center,
-        max: 100,
+        children: <Widget>[
-        divisions: 5,
+          Slider(
-        label: _currentSliderValue.round().toString(),
+            value: _currentSliderPrimaryValue,
-        onChanged: (double value) {
+            secondaryTrackValue: _currentSliderSecondaryValue,
-          setState(() {
+            label: _currentSliderPrimaryValue.round().toString(),
-            _currentSliderValue = value;
+            onChanged: (double value) {
-          });
+              setState(() {
-        },
+                _currentSliderPrimaryValue = value;
+              });
+            },
+          ),
+          Slider(
+            value: _currentSliderSecondaryValue,
+            label: _currentSliderSecondaryValue.round().toString(),
+            onChanged: (double value) {
+              setState(() {
+                _currentSliderSecondaryValue = value;
+              });
+            },
+          ),
+        ],
       ),
     );
   }

examples/api/lib/material/slider/slider.2.dart

@@ -1,63 +0,0 @@
-// Copyright 2014 The Flutter Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:flutter/material.dart';
-
-/// Flutter code sample for [Slider].
-
-void main() => runApp(const SliderApp());
-
-class SliderApp extends StatelessWidget {
-  const SliderApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const MaterialApp(
-      home: SliderExample(),
-    );
-  }
-}
-
-class SliderExample extends StatefulWidget {
-  const SliderExample({super.key});
-
-  @override
-  State<SliderExample> createState() => _SliderExampleState();
-}
-
-class _SliderExampleState extends State<SliderExample> {
-  double _currentSliderPrimaryValue = 0.2;
-  double _currentSliderSecondaryValue = 0.5;
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Slider')),
-      body: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          Slider(
-            value: _currentSliderPrimaryValue,
-            secondaryTrackValue: _currentSliderSecondaryValue,
-            label: _currentSliderPrimaryValue.round().toString(),
-            onChanged: (double value) {
-              setState(() {
-                _currentSliderPrimaryValue = value;
-              });
-            },
-          ),
-          Slider(
-            value: _currentSliderSecondaryValue,
-            label: _currentSliderSecondaryValue.round().toString(),
-            onChanged: (double value) {
-              setState(() {
-                _currentSliderSecondaryValue = value;
-              });
-            },
-          ),
-        ],
-      ),
-    );
-  }
-}

examples/api/test/material/slider/slider.0_test.dart

@@ -7,23 +7,50 @@ import 'package:flutter_api_samples/material/slider/slider.0.dart' as example;
 import 'package:flutter_test/flutter_test.dart';
 
 void main() {
-  testWidgets('Slider can change its value', (WidgetTester tester) async {
+  testWidgets('Sliders can change their value', (WidgetTester tester) async {
     await tester.pumpWidget(
-      const example.SliderApp(),
+      const example.SliderExampleApp(),
     );
 
-    expect(find.byType(Slider), findsOneWidget);
+    expect(find.byType(Slider), findsNWidgets(2));
 
-    final Finder sliderFinder = find.byType(Slider);
+    Finder sliderFinder = find.byType(Slider).first;
+    Slider slider = tester.widget<Slider>(sliderFinder);
+    expect(slider.value, equals(20));
 
-    Slider slider = tester.widget(sliderFinder);
+    await tester.tapAt(tester.getCenter(sliderFinder));
-    expect(slider.value, 20);
-
-    final Offset center = tester.getCenter(sliderFinder);
-    await tester.tapAt(Offset(center.dx + 100, center.dy));
     await tester.pump();
 
     slider = tester.widget(sliderFinder);
-    expect(slider.value, 60.0);
+    expect(slider.value, equals(50));
+
+    sliderFinder = find.byType(Slider).last;
+    slider = tester.widget(sliderFinder);
+    expect(slider.value, equals(60));
+
+    await tester.tapAt(tester.getTopLeft(sliderFinder));
+    await tester.pump();
+
+    slider = tester.widget(sliderFinder);
+    expect(slider.value, equals(0));
+  });
+
+  testWidgets('Sliders year2023 flag can be toggled', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.SliderExampleApp(),
+    );
+
+    Slider slider = tester.widget<Slider>(find.byType(Slider).first);
+    expect(slider.year2023, true);
+    Slider discreteSlider = tester.widget<Slider>(find.byType(Slider).last);
+    expect(discreteSlider.year2023, true);
+
+    await tester.tap(find.byType(SwitchListTile));
+    await tester.pumpAndSettle();
+
+    slider = tester.widget<Slider>(find.byType(Slider).first);
+    expect(slider.year2023, false);
+    discreteSlider = tester.widget<Slider>(find.byType(Slider).last);
+    expect(discreteSlider.year2023, false);
   });
 }

examples/api/test/material/slider/slider.1_test.dart

@@ -7,23 +7,29 @@ import 'package:flutter_api_samples/material/slider/slider.1.dart' as example;
 import 'package:flutter_test/flutter_test.dart';
 
 void main() {
-  testWidgets('Slider can change its value', (WidgetTester tester) async {
+  testWidgets('Slider shows secondary track', (WidgetTester tester) async {
     await tester.pumpWidget(
       const example.SliderApp(),
     );
 
-    expect(find.byType(Slider), findsOneWidget);
+    expect(find.byType(Slider), findsNWidgets(2));
 
-    final Finder sliderFinder = find.byType(Slider);
+    final Finder slider1Finder = find.byType(Slider).at(0);
+    final Finder slider2Finder = find.byType(Slider).at(1);
 
-    Slider slider = tester.widget(sliderFinder);
+    Slider slider1 = tester.widget(slider1Finder);
-    expect(slider.value, 20);
+    Slider slider2 = tester.widget(slider2Finder);
+    expect(slider1.secondaryTrackValue, slider2.value);
 
-    final Offset center = tester.getCenter(sliderFinder);
+    const double targetValue = 0.8;
-    await tester.tapAt(Offset(center.dx + 100, center.dy));
+    final Rect rect = tester.getRect(slider2Finder);
+    final Offset target = Offset(rect.left + (rect.right - rect.left) * targetValue, rect.top + (rect.bottom - rect.top) / 2);
+    await tester.tapAt(target);
     await tester.pump();
 
-    slider = tester.widget(sliderFinder);
+    slider1 = tester.widget(slider1Finder);
-    expect(slider.value, 60.0);
+    slider2 = tester.widget(slider2Finder);
+    expect(slider1.secondaryTrackValue, closeTo(targetValue, 0.05));
+    expect(slider1.secondaryTrackValue, slider2.value);
   });
 }

examples/api/test/material/slider/slider.2_test.dart

@@ -1,35 +0,0 @@
-// Copyright 2014 The Flutter Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_api_samples/material/slider/slider.2.dart' as example;
-import 'package:flutter_test/flutter_test.dart';
-
-void main() {
-  testWidgets('Slider shows secondary track', (WidgetTester tester) async {
-    await tester.pumpWidget(
-      const example.SliderApp(),
-    );
-
-    expect(find.byType(Slider), findsNWidgets(2));
-
-    final Finder slider1Finder = find.byType(Slider).at(0);
-    final Finder slider2Finder = find.byType(Slider).at(1);
-
-    Slider slider1 = tester.widget(slider1Finder);
-    Slider slider2 = tester.widget(slider2Finder);
-    expect(slider1.secondaryTrackValue, slider2.value);
-
-    const double targetValue = 0.8;
-    final Rect rect = tester.getRect(slider2Finder);
-    final Offset target = Offset(rect.left + (rect.right - rect.left) * targetValue, rect.top + (rect.bottom - rect.top) / 2);
-    await tester.tapAt(target);
-    await tester.pump();
-
-    slider1 = tester.widget(slider1Finder);
-    slider2 = tester.widget(slider2Finder);
-    expect(slider1.secondaryTrackValue, closeTo(targetValue, 0.05));
-    expect(slider1.secondaryTrackValue, slider2.value);
-  });
-}

packages/flutter/lib/src/material/slider.dart

@@ -78,27 +78,18 @@ enum SliderInteraction {
 /// {@youtube 560 315 https://www.youtube.com/watch?v=ufb4gIPDmEs}
 ///
 /// {@tool dartpad}
-/// ![A legacy slider widget, consisting of 5 divisions and showing the default value
+/// This example showcases non-discrete and discrete [Slider]s.
-/// indicator.](https://flutter.github.io/assets-for-api-docs/assets/material/slider.png)
+/// The [Slider]s will show the updated ![Material 3 Design appearance](https://m3.material.io/components/sliders/overview)
-///
+/// when setting the [Slider.year2023] flag to false.
-/// The Sliders value is part of the Stateful widget subclass to change the value
-/// setState was called.
 ///
 /// ** See code in examples/api/lib/material/slider/slider.0.dart **
 /// {@end-tool}
 ///
 /// {@tool dartpad}
-/// This sample shows the creation of a [Slider] using [ThemeData.useMaterial3] flag,
-/// as described in: https://m3.material.io/components/sliders/overview.
-///
-/// ** See code in examples/api/lib/material/slider/slider.1.dart **
-/// {@end-tool}
-///
-/// {@tool dartpad}
 /// This example shows a [Slider] widget using the [Slider.secondaryTrackValue]
 /// to show a secondary track in the slider.
 ///
-/// ** See code in examples/api/lib/material/slider/slider.2.dart **
+/// ** See code in examples/api/lib/material/slider/slider.1.dart **
 /// {@end-tool}
 ///
 /// A slider can be used to select from either a continuous or a discrete set of