development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-13 19:52:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cupertino picker fidelity fixes (#22537)

Browse source
This commit is contained in:
xster 2018-10-02 18:35:02 -07:00 committed by GitHub
parent 08fe1d86e9
commit dd3af0e287
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/flutter/lib/src/cupertino/date_picker.dart
View file

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

6
packages/flutter/lib/src/cupertino/localizations.dart
View file

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

7
packages/flutter/lib/src/cupertino/picker.dart
View file

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

51
packages/flutter/test/cupertino/date_picker_test.dart
View file

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