Unverified Commit dd3af0e2 authored by xster's avatar xster Committed by GitHub

Cupertino picker fidelity fixes (#22537)

parent 08fe1d86
...@@ -13,11 +13,15 @@ import 'picker.dart'; ...@@ -13,11 +13,15 @@ import 'picker.dart';
const double _kItemExtent = 32.0; const double _kItemExtent = 32.0;
const double _kPickerWidth = 330.0; const double _kPickerWidth = 330.0;
const bool _kUseMagnifier = true; const bool _kUseMagnifier = true;
const double _kMagnification = 1.1; const double _kMagnification = 1.05;
const double _kDatePickerPadSize = 12.0; const double _kDatePickerPadSize = 12.0;
// Considers setting the default background color from the theme, in the future. // Considers setting the default background color from the theme, in the future.
const Color _kBackgroundColor = CupertinoColors.white; 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. // 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. // 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> { ...@@ -639,12 +643,15 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
return MediaQuery( return MediaQuery(
data: const MediaQueryData(textScaleFactor: 1.0), 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> { ...@@ -872,12 +879,15 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
data: const MediaQueryData(textScaleFactor: 1.0), data: const MediaQueryData(textScaleFactor: 1.0),
child: NotificationListener<ScrollEndNotification>( child: NotificationListener<ScrollEndNotification>(
onNotification: _keepInValidRange, 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,
), ),
), ),
); );
......
...@@ -97,7 +97,7 @@ abstract class CupertinoLocalizations { ...@@ -97,7 +97,7 @@ abstract class CupertinoLocalizations {
/// ///
/// Examples: datePickerHour(1) in: /// Examples: datePickerHour(1) in:
/// ///
/// - US English: 01 /// - US English: 1
/// - Arabic: ٠١ /// - Arabic: ٠١
String datePickerHour(int hour); String datePickerHour(int hour);
...@@ -276,7 +276,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations { ...@@ -276,7 +276,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations {
String datePickerDayOfMonth(int dayIndex) => dayIndex.toString(); String datePickerDayOfMonth(int dayIndex) => dayIndex.toString();
@override @override
String datePickerHour(int hour) => hour.toString().padLeft(2, '0'); String datePickerHour(int hour) => hour.toString();
@override @override
String datePickerHourSemanticsLabel(int hour) => hour.toString() + " o'clock"; String datePickerHourSemanticsLabel(int hour) => hour.toString() + " o'clock";
...@@ -295,7 +295,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations { ...@@ -295,7 +295,7 @@ class DefaultCupertinoLocalizations implements CupertinoLocalizations {
String datePickerMediumDate(DateTime date) { String datePickerMediumDate(DateTime date) {
return '${_shortWeekdays[date.weekday - DateTime.monday]} ' return '${_shortWeekdays[date.weekday - DateTime.monday]} '
'${_shortMonths[date.month - DateTime.january]} ' '${_shortMonths[date.month - DateTime.january]} '
'${date.day}'; '${date.day.toString().padRight(2)}';
} }
@override @override
......
...@@ -10,8 +10,10 @@ import 'package:flutter/widgets.dart'; ...@@ -10,8 +10,10 @@ import 'package:flutter/widgets.dart';
/// Color of the 'magnifier' lens border. /// Color of the 'magnifier' lens border.
const Color _kHighlighterBorder = Color(0xFF7F7F7F); const Color _kHighlighterBorder = Color(0xFF7F7F7F);
const Color _kDefaultBackground = Color(0xFFD2D4DB); 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' /// Opacity fraction value that hides the wheel above and below the 'magnifier'
/// lens with the same color as the background. /// lens with the same color as the background.
const double _kForegroundScreenOpacityFraction = 0.7; const double _kForegroundScreenOpacityFraction = 0.7;
...@@ -248,6 +250,7 @@ class _CupertinoPickerState extends State<CupertinoPicker> { ...@@ -248,6 +250,7 @@ class _CupertinoPickerState extends State<CupertinoPicker> {
controller: widget.scrollController, controller: widget.scrollController,
physics: const FixedExtentScrollPhysics(), physics: const FixedExtentScrollPhysics(),
diameterRatio: widget.diameterRatio, diameterRatio: widget.diameterRatio,
perspective: _kDefaultPerspective,
offAxisFraction: widget.offAxisFraction, offAxisFraction: widget.offAxisFraction,
useMagnifier: widget.useMagnifier, useMagnifier: widget.useMagnifier,
magnification: widget.magnification, magnification: widget.magnification,
......
...@@ -282,7 +282,7 @@ void main() { ...@@ -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();
await tester.pump(const Duration(milliseconds: 500)); await tester.pump(const Duration(milliseconds: 500));
...@@ -290,6 +290,49 @@ void main() { ...@@ -290,6 +290,49 @@ void main() {
expect(selectedDateTime, DateTime(2018, 1, 1, 8, 30)); 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 { testWidgets('width of picker in date and time mode is consistent', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
SizedBox( SizedBox(
...@@ -308,7 +351,7 @@ void main() { ...@@ -308,7 +351,7 @@ void main() {
// Distance between the first column and the last column. // Distance between the first column and the last column.
final double distance = 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( await tester.pumpWidget(
SizedBox( SizedBox(
...@@ -327,7 +370,7 @@ void main() { ...@@ -327,7 +370,7 @@ void main() {
// Distance between the first and the last column should be the same. // Distance between the first and the last column should be the same.
expect( 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, distance,
); );
}); });
...@@ -546,7 +589,7 @@ void main() { ...@@ -546,7 +589,7 @@ void main() {
expect(date, DateTime(2018, 1, 1, 9, 59)); 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();
await tester.pump(const Duration(milliseconds: 500)); await tester.pump(const Duration(milliseconds: 500));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment