Cupertino picker fidelity fixes (#22537)

packages/flutter/lib/src/cupertino/date_picker.dart

@@ -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(
+      child: DefaultTextStyle.merge(
-        delegate: _DatePickerLayoutDelegate(
+        style: _kDefaultPickerTextStyle,
-          columnWidths: columnWidths,
+        child: CustomMultiChildLayout(
-          textDirectionFactor: textDirectionFactor,
+          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(
+        child: DefaultTextStyle.merge(
-          delegate: _DatePickerLayoutDelegate(
+          style: _kDefaultPickerTextStyle,
-            columnWidths: columnWidths,
+          child: CustomMultiChildLayout(
-            textDirectionFactor: textDirectionFactor,
+            delegate: _DatePickerLayoutDelegate(
+              columnWidths: columnWidths,
+              textDirectionFactor: textDirectionFactor,
+            ),
+            children: pickers,
           ),
-          children: pickers,
         ),
       ),
     );

packages/flutter/lib/src/cupertino/localizations.dart

@@ -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

packages/flutter/lib/src/cupertino/picker.dart

@@ -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.
+// Eyeballed values comparing with a native picker.
-const double _kDefaultDiameterRatio = 1.1;
+// 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,

packages/flutter/test/cupertino/date_picker_test.dart

@@ -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));