mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Cupertino picker fidelity fixes (#22537)
This commit is contained in:
parent
08fe1d86e9
commit
dd3af0e287
|
@ -13,11 +13,15 @@ import 'picker.dart';
|
|||
const double _kItemExtent = 32.0;
|
||||
const double _kPickerWidth = 330.0;
|
||||
const bool _kUseMagnifier = true;
|
||||
const double _kMagnification = 1.1;
|
||||
const double _kMagnification = 1.05;
|
||||
const double _kDatePickerPadSize = 12.0;
|
||||
// Considers setting the default background color from the theme, in the future.
|
||||
const Color _kBackgroundColor = CupertinoColors.white;
|
||||
|
||||
const TextStyle _kDefaultPickerTextStyle = TextStyle(
|
||||
letterSpacing: -0.83,
|
||||
);
|
||||
|
||||
// Lays out the date picker based on how much space each single column needs.
|
||||
//
|
||||
// Each column is a child of this delegate, indexed from 0 to number of columns - 1.
|
||||
|
@ -639,12 +643,15 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
|
|||
|
||||
return MediaQuery(
|
||||
data: const MediaQueryData(textScaleFactor: 1.0),
|
||||
child: CustomMultiChildLayout(
|
||||
delegate: _DatePickerLayoutDelegate(
|
||||
columnWidths: columnWidths,
|
||||
textDirectionFactor: textDirectionFactor,
|
||||
child: DefaultTextStyle.merge(
|
||||
style: _kDefaultPickerTextStyle,
|
||||
child: CustomMultiChildLayout(
|
||||
delegate: _DatePickerLayoutDelegate(
|
||||
columnWidths: columnWidths,
|
||||
textDirectionFactor: textDirectionFactor,
|
||||
),
|
||||
children: pickers,
|
||||
),
|
||||
children: pickers,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
@ -872,12 +879,15 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
|
|||
data: const MediaQueryData(textScaleFactor: 1.0),
|
||||
child: NotificationListener<ScrollEndNotification>(
|
||||
onNotification: _keepInValidRange,
|
||||
child: CustomMultiChildLayout(
|
||||
delegate: _DatePickerLayoutDelegate(
|
||||
columnWidths: columnWidths,
|
||||
textDirectionFactor: textDirectionFactor,
|
||||
child: DefaultTextStyle.merge(
|
||||
style: _kDefaultPickerTextStyle,
|
||||
child: CustomMultiChildLayout(
|
||||
delegate: _DatePickerLayoutDelegate(
|
||||
columnWidths: columnWidths,
|
||||
textDirectionFactor: textDirectionFactor,
|
||||
),
|
||||
children: pickers,
|
||||
),
|
||||
children: pickers,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
@ -97,7 +97,7 @@ abstract class CupertinoLocalizations {
|
|||
///
|
||||
/// Examples: datePickerHour(1) in:
|
||||
///
|
||||
/// - US English: 01
|
||||
/// - US English: 1
|
||||
/// - Arabic: ٠١
|
||||
String datePickerHour(int hour);
|
||||
|
||||
|
@ -276,7 +276,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations {
|
|||
String datePickerDayOfMonth(int dayIndex) => dayIndex.toString();
|
||||
|
||||
@override
|
||||
String datePickerHour(int hour) => hour.toString().padLeft(2, '0');
|
||||
String datePickerHour(int hour) => hour.toString();
|
||||
|
||||
@override
|
||||
String datePickerHourSemanticsLabel(int hour) => hour.toString() + " o'clock";
|
||||
|
@ -295,7 +295,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations {
|
|||
String datePickerMediumDate(DateTime date) {
|
||||
return '${_shortWeekdays[date.weekday - DateTime.monday]} '
|
||||
'${_shortMonths[date.month - DateTime.january]} '
|
||||
'${date.day}';
|
||||
'${date.day.toString().padRight(2)}';
|
||||
}
|
||||
|
||||
@override
|
||||
|
|
|
@ -10,8 +10,10 @@ import 'package:flutter/widgets.dart';
|
|||
/// Color of the 'magnifier' lens border.
|
||||
const Color _kHighlighterBorder = Color(0xFF7F7F7F);
|
||||
const Color _kDefaultBackground = Color(0xFFD2D4DB);
|
||||
/// Eyeballed value comparing with a native picker.
|
||||
const double _kDefaultDiameterRatio = 1.1;
|
||||
// Eyeballed values comparing with a native picker.
|
||||
// Values closer to PI produces denser flatter lists.
|
||||
const double _kDefaultDiameterRatio = 1.35;
|
||||
const double _kDefaultPerspective = 0.004;
|
||||
/// Opacity fraction value that hides the wheel above and below the 'magnifier'
|
||||
/// lens with the same color as the background.
|
||||
const double _kForegroundScreenOpacityFraction = 0.7;
|
||||
|
@ -248,6 +250,7 @@ class _CupertinoPickerState extends State<CupertinoPicker> {
|
|||
controller: widget.scrollController,
|
||||
physics: const FixedExtentScrollPhysics(),
|
||||
diameterRatio: widget.diameterRatio,
|
||||
perspective: _kDefaultPerspective,
|
||||
offAxisFraction: widget.offAxisFraction,
|
||||
useMagnifier: widget.useMagnifier,
|
||||
magnification: widget.magnification,
|
||||
|
|
|
@ -282,7 +282,7 @@ void main() {
|
|||
),
|
||||
);
|
||||
|
||||
await tester.drag(find.text('09'), const Offset(0.0, 32.0));
|
||||
await tester.drag(find.text('9'), const Offset(0.0, 32.0));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 500));
|
||||
|
||||
|
@ -290,6 +290,49 @@ void main() {
|
|||
expect(selectedDateTime, DateTime(2018, 1, 1, 8, 30));
|
||||
});
|
||||
|
||||
testWidgets('date picker has expected string', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
SizedBox(
|
||||
height: 400.0,
|
||||
width: 400.0,
|
||||
child: Directionality(
|
||||
textDirection: TextDirection.ltr,
|
||||
child: CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.date,
|
||||
onDateTimeChanged: (_) {},
|
||||
initialDateTime: DateTime(2018, 9, 15, 0, 0),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.text('September'), findsOneWidget);
|
||||
expect(find.text('9'), findsOneWidget);
|
||||
expect(find.text('2018'), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('datetime picker has expected string', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
SizedBox(
|
||||
height: 400.0,
|
||||
width: 400.0,
|
||||
child: Directionality(
|
||||
textDirection: TextDirection.ltr,
|
||||
child: CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.dateAndTime,
|
||||
onDateTimeChanged: (_) {},
|
||||
initialDateTime: DateTime(2018, 9, 15, 3, 14),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.text('Sat Sep 15'), findsOneWidget);
|
||||
expect(find.text('3'), findsOneWidget);
|
||||
expect(find.text('14'), findsOneWidget);
|
||||
expect(find.text('AM'), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('width of picker in date and time mode is consistent', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
SizedBox(
|
||||
|
@ -308,7 +351,7 @@ void main() {
|
|||
|
||||
// Distance between the first column and the last column.
|
||||
final double distance =
|
||||
tester.getCenter(find.text('Mon Jan 1')).dx - tester.getCenter(find.text('AM')).dx;
|
||||
tester.getCenter(find.text('Mon Jan 1 ')).dx - tester.getCenter(find.text('AM')).dx;
|
||||
|
||||
await tester.pumpWidget(
|
||||
SizedBox(
|
||||
|
@ -327,7 +370,7 @@ void main() {
|
|||
|
||||
// Distance between the first and the last column should be the same.
|
||||
expect(
|
||||
tester.getCenter(find.text('Mon Jan 1')).dx - tester.getCenter(find.text('AM')).dx,
|
||||
tester.getCenter(find.text('Mon Jan 1 ')).dx - tester.getCenter(find.text('AM')).dx,
|
||||
distance,
|
||||
);
|
||||
});
|
||||
|
@ -546,7 +589,7 @@ void main() {
|
|||
|
||||
expect(date, DateTime(2018, 1, 1, 9, 59));
|
||||
|
||||
await tester.drag(find.text('09'), const Offset(0.0, -192.0));
|
||||
await tester.drag(find.text('9'), const Offset(0.0, -192.0));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 500));
|
||||
|
||||
|
|
Loading…
Reference in a new issue