mirror of
https://github.com/flutter/flutter
synced 2024-08-27 12:00:58 +00:00
Add CupertinoPicker
interactive example (#93622)
This commit is contained in:
parent
6985b78ac9
commit
ee0bbf4789
117
examples/api/lib/cupertino/picker/cupertino_picker.0.dart
Normal file
117
examples/api/lib/cupertino/picker/cupertino_picker.0.dart
Normal file
|
@ -0,0 +1,117 @@
|
|||
// 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 CupertinoPicker
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
const double _kItemExtent = 32.0;
|
||||
const List<String> _fruitNames = <String>[
|
||||
'🍎 Apple',
|
||||
'🥭 Mango',
|
||||
'🍌 Banana',
|
||||
'🍊 Orange',
|
||||
'🍍 Pineapple',
|
||||
'🍓 Strawberry',
|
||||
];
|
||||
|
||||
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: CupertinoPickerSample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CupertinoPickerSample extends StatefulWidget {
|
||||
const CupertinoPickerSample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<CupertinoPickerSample> createState() => _CupertinoPickerSampleState();
|
||||
}
|
||||
|
||||
class _CupertinoPickerSampleState extends State<CupertinoPickerSample> {
|
||||
int _selectedFruit = 0;
|
||||
|
||||
// This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoPicker.
|
||||
void _showDialog(Widget child) {
|
||||
showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) => Container(
|
||||
height: 216,
|
||||
padding: const EdgeInsets.only(top: 6.0),
|
||||
// The Bottom margin is provided to align the popup above the system navigation bar.
|
||||
margin: EdgeInsets.only(
|
||||
bottom: MediaQuery.of(context).viewInsets.bottom,
|
||||
),
|
||||
// Provide a background color for the popup.
|
||||
color: CupertinoColors.systemBackground.resolveFrom(context),
|
||||
// Use a SafeArea widget to avoid system overlaps.
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: child,
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
child: DefaultTextStyle(
|
||||
style: TextStyle(
|
||||
color: CupertinoColors.label.resolveFrom(context),
|
||||
fontSize: 22.0,
|
||||
),
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
const Text('Selected fruit: '),
|
||||
CupertinoButton(
|
||||
padding: EdgeInsets.zero,
|
||||
// Display a CupertinoPicker with list of fruits.
|
||||
onPressed: () => _showDialog(
|
||||
CupertinoPicker(
|
||||
magnification: 1.22,
|
||||
squeeze: 1.2,
|
||||
useMagnifier: true,
|
||||
itemExtent: _kItemExtent,
|
||||
// This is called when selected item is changed.
|
||||
onSelectedItemChanged: (int selectedItem) {
|
||||
setState(() {
|
||||
_selectedFruit = selectedItem;
|
||||
});
|
||||
},
|
||||
children: List<Widget>.generate(_fruitNames.length, (int index) {
|
||||
return Center(
|
||||
child: Text(
|
||||
_fruitNames[index],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
// This displays the selected fruit name.
|
||||
child: Text(_fruitNames[_selectedFruit],
|
||||
style: const TextStyle(
|
||||
fontSize: 22.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
// 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_api_samples/cupertino/picker/cupertino_picker.0.dart' as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
const Offset _kRowOffset = Offset(0.0, -50.0);
|
||||
|
||||
void main() {
|
||||
testWidgets('Change selected fruit using CupertinoPicker', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.MyApp(),
|
||||
);
|
||||
|
||||
// Open the Cupertino picker.
|
||||
await tester.tap(find.text('🍎 Apple'));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// Drag the wheel to change fruit selection.
|
||||
await tester.drag(find.text('🥭 Mango'), _kRowOffset, touchSlopY: 0, warnIfMissed: false); // see top of file
|
||||
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 500));
|
||||
|
||||
// Close the Cupertino picker.
|
||||
await tester.tapAt(const Offset(1.0, 1.0));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('🍌 Banana'), findsOneWidget);
|
||||
});
|
||||
}
|
|
@ -38,6 +38,13 @@ const double _kOverAndUnderCenterOpacity = 0.447;
|
|||
///
|
||||
/// By default, descendent texts are shown with [CupertinoTextThemeData.pickerTextStyle].
|
||||
///
|
||||
/// {@tool dartpad}
|
||||
/// This example shows a [CupertinoPicker] that displays a list of fruits on a wheel for
|
||||
/// selection.
|
||||
///
|
||||
/// ** See code in examples/api/lib/cupertino/picker/cupertino_picker.0.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// See also:
|
||||
///
|
||||
/// * [ListWheelScrollView], the generic widget backing this picker without
|
||||
|
|
Loading…
Reference in a new issue