Unverified Commit aaa4a528 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Add Material 3 `Slider` example (#115638)

* Add Material 3 `Slider` example

* Update doc

* Update test titles
parent 76234863
...@@ -6,47 +6,44 @@ ...@@ -6,47 +6,44 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
void main() => runApp(const MyApp()); void main() => runApp(const SliderApp());
class MyApp extends StatelessWidget { class SliderApp extends StatelessWidget {
const MyApp({super.key}); const SliderApp({super.key});
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return const MaterialApp(
title: _title, home: SliderExample(),
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class SliderExample extends StatefulWidget {
const MyStatefulWidget({super.key}); const SliderExample({super.key});
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<SliderExample> createState() => _SliderExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _SliderExampleState extends State<SliderExample> {
double _currentSliderValue = 20; double _currentSliderValue = 20;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Slider( return Scaffold(
value: _currentSliderValue, appBar: AppBar(title: const Text('Slider')),
max: 100, body: Slider(
divisions: 5, value: _currentSliderValue,
label: _currentSliderValue.round().toString(), max: 100,
onChanged: (double value) { divisions: 5,
setState(() { label: _currentSliderValue.round().toString(),
_currentSliderValue = value; onChanged: (double value) {
}); setState(() {
}, _currentSliderValue = value;
});
},
),
); );
} }
} }
...@@ -6,61 +6,48 @@ ...@@ -6,61 +6,48 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
void main() => runApp(const MyApp()); void main() => runApp(const SliderApp());
class MyApp extends StatelessWidget { class SliderApp extends StatelessWidget {
const MyApp({super.key}); const SliderApp({super.key});
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title, theme: ThemeData(
home: Scaffold( colorSchemeSeed: const Color(0xff6750a4),
appBar: AppBar(title: const Text(_title)), useMaterial3: true,
body: const MyStatefulWidget(),
), ),
home: const SliderExample(),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class SliderExample extends StatefulWidget {
const MyStatefulWidget({super.key}); const SliderExample({super.key});
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<SliderExample> createState() => _SliderExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _SliderExampleState extends State<SliderExample> {
double _currentSliderPrimaryValue = 0.2; double _currentSliderValue = 20;
double _currentSliderSecondaryValue = 0.5;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Scaffold(
mainAxisAlignment: MainAxisAlignment.center, appBar: AppBar(title: const Text('Slider')),
children: <Widget>[ body: Slider(
Slider( value: _currentSliderValue,
value: _currentSliderPrimaryValue, max: 100,
secondaryTrackValue: _currentSliderSecondaryValue, divisions: 5,
label: _currentSliderPrimaryValue.round().toString(), label: _currentSliderValue.round().toString(),
onChanged: (double value) { onChanged: (double value) {
setState(() { setState(() {
_currentSliderPrimaryValue = value; _currentSliderValue = value;
}); });
}, },
), ),
Slider(
value: _currentSliderSecondaryValue,
label: _currentSliderSecondaryValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderSecondaryValue = value;
});
},
),
],
); );
} }
} }
// 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.
/// Flutter code sample for [Slider].
import 'package:flutter/material.dart';
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;
});
},
),
],
),
);
}
}
// 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.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Slider can change its value', (WidgetTester tester) async {
await tester.pumpWidget(
const example.SliderApp(),
);
expect(find.byType(Slider), findsOneWidget);
final Finder sliderFinder = find.byType(Slider);
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.pump();
slider = tester.widget(sliderFinder);
expect(slider.value, 60.0);
});
}
...@@ -7,29 +7,23 @@ import 'package:flutter_api_samples/material/slider/slider.1.dart' as example; ...@@ -7,29 +7,23 @@ import 'package:flutter_api_samples/material/slider/slider.1.dart' as example;
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
void main() { void main() {
testWidgets('Slider shows secondary track', (WidgetTester tester) async { testWidgets('Slider can change its value', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
const example.MyApp(), const example.SliderApp(),
); );
expect(find.byType(Slider), findsNWidgets(2)); expect(find.byType(Slider), findsOneWidget);
final Finder slider1Finder = find.byType(Slider).at(0); final Finder sliderFinder = find.byType(Slider);
final Finder slider2Finder = find.byType(Slider).at(1);
Slider slider1 = tester.widget(slider1Finder); Slider slider = tester.widget(sliderFinder);
Slider slider2 = tester.widget(slider2Finder); expect(slider.value, 20);
expect(slider1.secondaryTrackValue, slider2.value);
const double targetValue = 0.8; final Offset center = tester.getCenter(sliderFinder);
final Rect rect = tester.getRect(slider2Finder); await tester.tapAt(Offset(center.dx + 100, center.dy));
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(); await tester.pump();
slider1 = tester.widget(slider1Finder); slider = tester.widget(sliderFinder);
slider2 = tester.widget(slider2Finder); expect(slider.value, 60.0);
expect(slider1.secondaryTrackValue, closeTo(targetValue, 0.05));
expect(slider1.secondaryTrackValue, slider2.value);
}); });
} }
// 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);
});
}
...@@ -41,7 +41,7 @@ enum _SliderType { material, adaptive } ...@@ -41,7 +41,7 @@ enum _SliderType { material, adaptive }
/// {@youtube 560 315 https://www.youtube.com/watch?v=ufb4gIPDmEs} /// {@youtube 560 315 https://www.youtube.com/watch?v=ufb4gIPDmEs}
/// ///
/// {@tool dartpad} /// {@tool dartpad}
/// ![A slider widget, consisting of 5 divisions and showing the default value /// ![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) /// 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 /// The Sliders value is part of the Stateful widget subclass to change the value
...@@ -51,10 +51,17 @@ enum _SliderType { material, adaptive } ...@@ -51,10 +51,17 @@ enum _SliderType { material, adaptive }
/// {@end-tool} /// {@end-tool}
/// ///
/// {@tool dartpad} /// {@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] /// This example shows a [Slider] widget using the [Slider.secondaryTrackValue]
/// to show a secondary track in the slider. /// to show a secondary track in the slider.
/// ///
/// ** See code in examples/api/lib/material/slider/slider.1.dart ** /// ** See code in examples/api/lib/material/slider/slider.2.dart **
/// {@end-tool} /// {@end-tool}
/// ///
/// A slider can be used to select from either a continuous or a discrete set of /// A slider can be used to select from either a continuous or a discrete set of
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment