Add CupertinoSlider
example (#93633)
This commit is contained in:
parent
79df99d182
commit
19a380ffe7
85
examples/api/lib/cupertino/slider/cupertino_slider.0.dart
Normal file
85
examples/api/lib/cupertino/slider/cupertino_slider.0.dart
Normal file
@ -0,0 +1,85 @@
|
||||
// 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 CupertinoSlider
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
void main() => runApp(const MyApp());
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({Key? key}) : super(key: key);
|
||||
|
||||
static const String _title = 'Flutter Code Sample';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const CupertinoApp(
|
||||
title: _title,
|
||||
home: CupertinoSliderSample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CupertinoSliderSample extends StatefulWidget {
|
||||
const CupertinoSliderSample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<CupertinoSliderSample> createState() => _CupertinoSliderSampleState();
|
||||
}
|
||||
|
||||
class _CupertinoSliderSampleState extends State<CupertinoSliderSample> {
|
||||
double _currentSliderValue = 0.0;
|
||||
String? _sliderStatus;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
// Display the current slider value.
|
||||
Text('$_currentSliderValue'),
|
||||
CupertinoSlider(
|
||||
key: const Key('slider'),
|
||||
value: _currentSliderValue,
|
||||
// This allows the slider to jump between divisions.
|
||||
// If null, the slide movement is continuous.
|
||||
divisions: 5,
|
||||
// The maximum slider value
|
||||
max: 100,
|
||||
activeColor: CupertinoColors.systemPurple,
|
||||
thumbColor: CupertinoColors.systemPurple,
|
||||
// This is called when sliding is started.
|
||||
onChangeStart: (double value) {
|
||||
setState(() {
|
||||
_sliderStatus = 'Sliding';
|
||||
});
|
||||
},
|
||||
// This is called when sliding has ended.
|
||||
onChangeEnd: (double value) {
|
||||
setState(() {
|
||||
_sliderStatus = 'Finished sliding';
|
||||
});
|
||||
},
|
||||
// This is called when slider value is changed.
|
||||
onChanged: (double value) {
|
||||
setState(() {
|
||||
_currentSliderValue = value;
|
||||
});
|
||||
},
|
||||
),
|
||||
Text(
|
||||
_sliderStatus ?? '',
|
||||
style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,31 @@
|
||||
// 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/cupertino.dart';
|
||||
import 'package:flutter_api_samples/cupertino/slider/cupertino_slider.0.dart' as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
void main() {
|
||||
Future<void> _dragSlider(WidgetTester tester, Key sliderKey) {
|
||||
final Offset topLeft = tester.getTopLeft(find.byKey(sliderKey));
|
||||
const double unit = CupertinoThumbPainter.radius;
|
||||
const double delta = 3.0 * unit;
|
||||
return tester.dragFrom(topLeft + const Offset(unit, unit), const Offset(delta, 0.0));
|
||||
}
|
||||
|
||||
testWidgets('Can change value using CupertinoSlider', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.MyApp(),
|
||||
);
|
||||
|
||||
// Check for the initial slider value.
|
||||
expect(find.text('0.0'), findsOneWidget);
|
||||
|
||||
await _dragSlider(tester, const Key('slider'));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// Check for the updated slider value.
|
||||
expect(find.text('40.0'), findsOneWidget);
|
||||
});
|
||||
}
|
@ -35,6 +35,12 @@ import 'thumb_painter.dart';
|
||||
/// that use a slider will listen for the [onChanged] callback and rebuild the
|
||||
/// slider with a new [value] to update the visual appearance of the slider.
|
||||
///
|
||||
/// {@tool dartpad}
|
||||
/// This example shows how to show the current slider value as it changes.
|
||||
///
|
||||
/// ** See code in examples/api/lib/cupertino/slider/cupertino_slider.0.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// See also:
|
||||
///
|
||||
/// * <https://developer.apple.com/ios/human-interface-guidelines/controls/sliders/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user