Cupertino picker fidelity fixes (#22537)
diff --git a/packages/flutter/lib/src/cupertino/date_picker.dart b/packages/flutter/lib/src/cupertino/date_picker.dart index 818d166..1233e1a 100644 --- a/packages/flutter/lib/src/cupertino/date_picker.dart +++ b/packages/flutter/lib/src/cupertino/date_picker.dart
@@ -13,11 +13,15 @@ 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 @@ 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 @@ 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, ), ), );
diff --git a/packages/flutter/lib/src/cupertino/localizations.dart b/packages/flutter/lib/src/cupertino/localizations.dart index 18273f8..05e4783 100644 --- a/packages/flutter/lib/src/cupertino/localizations.dart +++ b/packages/flutter/lib/src/cupertino/localizations.dart
@@ -97,7 +97,7 @@ /// /// Examples: datePickerHour(1) in: /// - /// - US English: 01 + /// - US English: 1 /// - Arabic: ٠١ String datePickerHour(int hour); @@ -276,7 +276,7 @@ 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 @@ String datePickerMediumDate(DateTime date) { return '${_shortWeekdays[date.weekday - DateTime.monday]} ' '${_shortMonths[date.month - DateTime.january]} ' - '${date.day}'; + '${date.day.toString().padRight(2)}'; } @override
diff --git a/packages/flutter/lib/src/cupertino/picker.dart b/packages/flutter/lib/src/cupertino/picker.dart index 0b42bb3..4de89c5 100644 --- a/packages/flutter/lib/src/cupertino/picker.dart +++ b/packages/flutter/lib/src/cupertino/picker.dart
@@ -10,8 +10,10 @@ /// 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 @@ controller: widget.scrollController, physics: const FixedExtentScrollPhysics(), diameterRatio: widget.diameterRatio, + perspective: _kDefaultPerspective, offAxisFraction: widget.offAxisFraction, useMagnifier: widget.useMagnifier, magnification: widget.magnification,
diff --git a/packages/flutter/test/cupertino/date_picker_test.dart b/packages/flutter/test/cupertino/date_picker_test.dart index 2282d26..cc04c8b 100644 --- a/packages/flutter/test/cupertino/date_picker_test.dart +++ b/packages/flutter/test/cupertino/date_picker_test.dart
@@ -282,7 +282,7 @@ ), ); - 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 @@ 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 @@ // 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 @@ // 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 @@ 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));