github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Material 3 Slider Samples (#159795)

Browse Source 
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
This commit is contained in:
Taha Tesser 2024-12-05 19:55:24 +02:00 committed by GitHub
parent a6d3bb5cb4
commit 689924529b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 127 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
examples/api/lib/material/slider/slider.0.dart
View File

@ -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 {
const SliderApp({super.key});
class SliderExampleApp extends StatelessWidget {
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(
value: _currentSliderValue,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 16,
children: <Widget>[
Slider(
year2023: year2023,
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;
});
},
),
],
),
),
);
}

44
examples/api/lib/material/slider/slider.1.dart
View File

@ -13,12 +13,8 @@ class SliderApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorSchemeSeed: const Color(0xff6750a4),
useMaterial3: true,
),
home: const SliderExample(),
return const MaterialApp(
home: 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(
value: _currentSliderValue,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
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;
});
},
),
],
),
);
}

63
examples/api/lib/material/slider/slider.2.dart
View File

@ -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;
});
},
),
],
),
);
}
}

47
examples/api/test/material/slider/slider.0_test.dart
View File

@ -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);
expect(slider.value, 20);
final Offset center = tester.getCenter(sliderFinder);
await tester.tapAt(Offset(center.dx + 100, center.dy));
await tester.tapAt(tester.getCenter(sliderFinder));
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);
});
}

24
examples/api/test/material/slider/slider.1_test.dart
View File

@ -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);
expect(slider.value, 20);
Slider slider1 = tester.widget(slider1Finder);
Slider slider2 = tester.widget(slider2Finder);
expect(slider1.secondaryTrackValue, slider2.value);
final Offset center = tester.getCenter(sliderFinder);
await tester.tapAt(Offset(center.dx + 100, center.dy));
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();
slider = tester.widget(sliderFinder);
expect(slider.value, 60.0);
slider1 = tester.widget(slider1Finder);
slider2 = tester.widget(slider2Finder);
expect(slider1.secondaryTrackValue, closeTo(targetValue, 0.05));
expect(slider1.secondaryTrackValue, slider2.value);
});
}

35
examples/api/test/material/slider/slider.2_test.dart
View File

@ -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);
});
}

17
packages/flutter/lib/src/material/slider.dart
View File

@ -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
/// indicator.](https://flutter.github.io/assets-for-api-docs/assets/material/slider.png)
///
/// The Sliders value is part of the Stateful widget subclass to change the value
/// setState was called.
/// This example showcases non-discrete and discrete [Slider]s.
/// 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.
///
/// ** 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