Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the cupertino picker visuals #65501

Merged
merged 46 commits into from Oct 7, 2020
Merged

Update the cupertino picker visuals #65501

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
ca539f4
Update the Cupertino picker visuals
YeungKC Sep 9, 2020
40e7766
Modify the picker_test test
YeungKC Sep 9, 2020
a48fb9c
Add high-contrast colors to tertiarySystemFillColor.
YeungKC Sep 9, 2020
0c6606b
Add margin to the Magnifier for CupertinoTimerPicker
YeungKC Sep 9, 2020
8da08c2
Fix tertiarySystemFill duplicate, remove duplicate tertiarySystemFill…
YeungKC Sep 9, 2020
f0b0288
Rollback tertiarySystemFill Color
YeungKC Sep 10, 2020
068003b
Formatting tertiarySystemFill's code
YeungKC Sep 10, 2020
cdfc306
fix `else if` line format.
YeungKC Sep 10, 2020
08d5eca
Creating and use CupertinoPickerDefaultMagnifier
YeungKC Sep 10, 2020
da630e9
Update the api doc of [magnifier].
YeungKC Sep 10, 2020
0b54059
magnifier change use default value
YeungKC Sep 12, 2020
0aa1cdf
The magnifier argument is change to selectionOverlay.
YeungKC Sep 12, 2020
3259ff3
Update api doc on CupertinoPickerDefaultMagnifier
YeungKC Sep 12, 2020
e59a5f4
Updated api doc about of CupertinoPickerDefaultMagnifier arguments.
YeungKC Sep 12, 2020
794064e
Update api doc about of CupertinoPickerDefaultMagnifier constructor.
YeungKC Sep 12, 2020
4522ee4
Update arguments useLeftStyle => capLeftEdge, useRightStyle => capRig…
YeungKC Sep 12, 2020
3b3926d
magnifier rename to selectionOverlay
YeungKC Sep 12, 2020
681b0ec
add _kDefaultPickerTextStyle.letterSpacing change code comment
YeungKC Sep 12, 2020
77c0d54
refactor: format error
YeungKC Sep 14, 2020
8c96099
doc: Fix and improve CupertinoPickerDefaultSelectionOverlay doc.
YeungKC Sep 14, 2020
278b69b
doc: Improve the CupertinoPickerDefaultSelectionOverlay construction …
YeungKC Sep 14, 2020
42534d5
doc: Improve CupertinoPicker.selectionOverlay doc.
YeungKC Sep 14, 2020
62cc79b
doc: Improve CupertinoPickerDefaultSelectionOverlay.capLeftEdge and C…
YeungKC Sep 14, 2020
7050739
doc: Improve CupertinoPickerDefaultSelectionOverlay.background doc.
YeungKC Sep 14, 2020
2290d53
doc: Improve document line feed format.
YeungKC Sep 14, 2020
1183516
doc: update the line breaks of the docs to <= 80 characters, so they …
YeungKC Sep 14, 2020
2cc36ca
doc: Improve CupertinoPickerDefaultSelectionOverlay.background doc.
YeungKC Sep 14, 2020
a3b552a
refactor: update CupertinoTimerPicker.pickerColumn padding, and add m…
YeungKC Sep 20, 2020
a07b636
doc: add me
YeungKC Sep 21, 2020
b8d0532
refactor: Add check null
YeungKC Sep 22, 2020
796468c
refactor: Optimization dart analysis.
YeungKC Sep 22, 2020
28e878c
doc: add comment for _kTimerPickerMagnification.
YeungKC Sep 22, 2020
a499f46
doc: add comment for _measureLabelsMaxWidth.
YeungKC Sep 22, 2020
3ae9fa7
refactor: Update magnification code.
YeungKC Sep 22, 2020
27c26d9
doc: update comment for localizations
YeungKC Sep 22, 2020
4e93853
refactor: update reasonable offAxisFraction.
YeungKC Sep 23, 2020
76850a6
refactor: Check and update the safety padding.
YeungKC Sep 25, 2020
77da94a
refactor: update test because of update to _kTimerPickerHalfColumnPad…
YeungKC Sep 25, 2020
eafe928
refactor: Optimize the layout when the width is less than the expecte…
YeungKC Sep 25, 2020
bd3e38a
feat: Add picker selectionOverlay test.
YeungKC Sep 25, 2020
ce77670
refactor: add TimerPicker golden tests fontSize.
YeungKC Sep 27, 2020
f62d641
Merge remote-tracking branch 'upstream/master' into update-the-cupert…
YeungKC Sep 28, 2020
fab4b3d
refactor: fix null safety.
YeungKC Sep 28, 2020
70fd426
Merge remote-tracking branch 'upstream/master' into update-the-cupert…
YeungKC Sep 28, 2020
ab5855b
Merge remote-tracking branch 'upstream/master' into update-the-cupert…
YeungKC Oct 2, 2020
4a2ab13
refactor: Comment out TimerPicker golden tests.
YeungKC Oct 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
85 changes: 58 additions & 27 deletions packages/flutter/lib/src/cupertino/date_picker.dart
View file
Open in desktop
Expand Up @@ -58,6 +58,10 @@ void _animateColumnControllerToItem(FixedExtentScrollController controller, int
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you attach a screenshot for the date picker to help review as well?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simulator Screen Shot - iPhone 11 - 2020-09-10 at 14 55 35

This is what the CupertinoDatePicker looks like in action, as iOS has removed this style, so it can't be compared to native components.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can by picking wheels in xcode. But it's definitely not very obvious.

Screen Shot 2020-09-10 at 3 58 28 PM

}

const Widget _leftMagnifier = CupertinoPickerDefaultMagnifier(useRightStyle: false,);
const Widget _centerMagnifier = CupertinoPickerDefaultMagnifier(useLeftStyle: false, useRightStyle: false,);
const Widget _rightMagnifier = CupertinoPickerDefaultMagnifier(useLeftStyle: false);

// 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.
Expand Down Expand Up @@ -453,7 +457,7 @@ class CupertinoDatePicker extends StatefulWidget {
}
}

typedef _ColumnBuilder = Widget Function(double offAxisFraction, TransitionBuilder itemPositioningBuilder);
typedef _ColumnBuilder = Widget Function(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You missed these names here (magnifier -> selectionOverlay)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, thanks for reminding me.


class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
// Fraction of the farthest column's vanishing point vs its width. Eyeballed
Expand Down Expand Up @@ -658,7 +662,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
}

// Builds the date column. The date is displayed in medium date format (e.g. Fri Aug 31).
Widget _buildMediumDatePicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildMediumDatePicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -711,6 +715,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
Text(dateText, style: _themeTextStyle(context)),
);
},
magnifier: magnifier,
),
);
}
Expand All @@ -734,7 +739,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
&& !(widget.maximumDate?.isBefore(rangeStart) ?? false);
}

Widget _buildHourPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildHourPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -794,11 +799,12 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
);
}),
looping: true,
magnifier: magnifier,
)
);
}

Widget _buildMinutePicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildMinutePicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -843,11 +849,12 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
);
}),
looping: true,
magnifier: magnifier,
),
);
}

Widget _buildAmPmPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildAmPmPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -883,6 +890,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
),
);
}),
magnifier: magnifier,
),
);
}
Expand Down Expand Up @@ -982,17 +990,23 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {

for (int i = 0; i < columnWidths.length; i++) {
double offAxisFraction = 0.0;
if (i == 0)
Widget magnifier;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd do a comb for the rename everywhere

if (i == 0) {
offAxisFraction = -_kMaximumOffAxisFraction * textDirectionFactor;
else if (i >= 2 || columnWidths.length == 2)
magnifier = _leftMagnifier;
} else if (i >= 2 || columnWidths.length == 2)
offAxisFraction = _kMaximumOffAxisFraction * textDirectionFactor;

EdgeInsets padding = const EdgeInsets.only(right: _kDatePickerPadSize);
if (i == columnWidths.length - 1)
if (i == columnWidths.length - 1) {
padding = padding.flipped;
magnifier = _rightMagnifier;
}
if (textDirectionFactor == -1)
padding = padding.flipped;

magnifier ??= _centerMagnifier;

pickers.add(LayoutId(
id: i,
child: pickerBuilders[i](
Expand All @@ -1012,6 +1026,7 @@ class _CupertinoDatePickerDateTimeState extends State<CupertinoDatePicker> {
),
);
},
magnifier,
),
));
}
Expand Down Expand Up @@ -1116,7 +1131,7 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
// Let `DateTime` handle the year/month overflow.
DateTime _lastDayInMonth(int year, int month) => DateTime(year, month + 1, 0);

Widget _buildDayPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildDayPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
final int daysInCurrentMonth = _lastDayInMonth(selectedYear, selectedMonth).day;
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
Expand Down Expand Up @@ -1153,11 +1168,12 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
);
}),
looping: true,
magnifier: magnifier,
),
);
}

Widget _buildMonthPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildMonthPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -1196,11 +1212,12 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
);
}),
looping: true,
magnifier: magnifier,
),
);
}

Widget _buildYearPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder) {
Widget _buildYearPicker(double offAxisFraction, TransitionBuilder itemPositioningBuilder, Widget magnifier) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
Expand Down Expand Up @@ -1242,6 +1259,7 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
),
);
},
magnifier: magnifier,
),
);
}
Expand Down Expand Up @@ -1354,6 +1372,15 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
if (textDirectionFactor == -1)
padding = const EdgeInsets.only(left: _kDatePickerPadSize);

Widget magnifier;
if (i == 0)
magnifier = _leftMagnifier;
else if (i == columnWidths.length - 1)
magnifier = _rightMagnifier;
else
magnifier = _centerMagnifier;


pickers.add(LayoutId(
id: i,
child: pickerBuilders[i](
Expand All @@ -1371,6 +1398,7 @@ class _CupertinoDatePickerDateState extends State<CupertinoDatePicker> {
),
);
},
magnifier,
),
));
}
Expand Down Expand Up @@ -1681,7 +1709,7 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
);
}

Widget _buildHourPicker(EdgeInsetsDirectional additionalPadding) {
Widget _buildHourPicker(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
return CupertinoPicker(
scrollController: FixedExtentScrollController(initialItem: selectedHour),
offAxisFraction: -0.5 * textDirectionFactor,
Expand Down Expand Up @@ -1709,18 +1737,19 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
child: _buildPickerNumberLabel(localizations.timerPickerHour(index), additionalPadding),
);
}),
magnifier: magnifier,
);
}

Widget _buildHourColumn(EdgeInsetsDirectional additionalPadding) {
Widget _buildHourColumn(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
return Stack(
children: <Widget>[
NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification notification) {
setState(() { lastSelectedHour = selectedHour; });
return false;
},
child: _buildHourPicker(additionalPadding),
child: _buildHourPicker(additionalPadding, magnifier),
),
_buildLabel(
localizations.timerPickerHourLabel(lastSelectedHour ?? selectedHour),
Expand All @@ -1730,7 +1759,7 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
);
}

Widget _buildMinutePicker(EdgeInsetsDirectional additionalPadding) {
Widget _buildMinutePicker(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
double offAxisFraction;
switch (widget.mode) {
case CupertinoTimerPickerMode.hm:
Expand Down Expand Up @@ -1775,18 +1804,19 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
child: _buildPickerNumberLabel(localizations.timerPickerMinute(minute), additionalPadding),
);
}),
magnifier: magnifier,
);
}

Widget _buildMinuteColumn(EdgeInsetsDirectional additionalPadding) {
Widget _buildMinuteColumn(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
return Stack(
children: <Widget>[
NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification notification) {
setState(() { lastSelectedMinute = selectedMinute; });
return false;
},
child: _buildMinutePicker(additionalPadding),
child: _buildMinutePicker(additionalPadding, magnifier),
),
_buildLabel(
localizations.timerPickerMinuteLabel(lastSelectedMinute ?? selectedMinute),
Expand All @@ -1796,7 +1826,7 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
);
}

Widget _buildSecondPicker(EdgeInsetsDirectional additionalPadding) {
Widget _buildSecondPicker(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
final double offAxisFraction = 0.5 * textDirectionFactor;

return CupertinoPicker(
Expand Down Expand Up @@ -1831,18 +1861,19 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
child: _buildPickerNumberLabel(localizations.timerPickerSecond(second), additionalPadding),
);
}),
magnifier: magnifier,
);
}

Widget _buildSecondColumn(EdgeInsetsDirectional additionalPadding) {
Widget _buildSecondColumn(EdgeInsetsDirectional additionalPadding, Widget magnifier) {
return Stack(
children: <Widget>[
NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification notification) {
setState(() { lastSelectedSecond = selectedSecond; });
return false;
},
child: _buildSecondPicker(additionalPadding),
child: _buildSecondPicker(additionalPadding, magnifier),
),
_buildLabel(
localizations.timerPickerSecondLabel(lastSelectedSecond ?? selectedSecond),
Expand Down Expand Up @@ -1877,24 +1908,24 @@ class _CupertinoTimerPickerState extends State<CupertinoTimerPicker> {
case CupertinoTimerPickerMode.hm:
// Pad the widget to make it as wide as `_kPickerWidth`.
columns = <Widget>[
_buildHourColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding)),
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2)),
_buildHourColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding), _leftMagnifier),
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2), _rightMagnifier),
];
break;
case CupertinoTimerPickerMode.ms:
// Pad the widget to make it as wide as `_kPickerWidth`.
columns = <Widget>[
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding)),
_buildSecondColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2)),
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding), _leftMagnifier),
_buildSecondColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2), _rightMagnifier),
];
break;
case CupertinoTimerPickerMode.hms:
const double paddingValue = _kTimerPickerHalfColumnPadding * 2;
totalWidth = _kTimerPickerColumnIntrinsicWidth * 3 + 4 * _kTimerPickerHalfColumnPadding + paddingValue;
columns = <Widget>[
_buildHourColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding)),
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: _kTimerPickerHalfColumnPadding)),
_buildSecondColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2)),
_buildHourColumn(const EdgeInsetsDirectional.only(start: paddingValue / 2, end: _kTimerPickerHalfColumnPadding), _leftMagnifier),
_buildMinuteColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: _kTimerPickerHalfColumnPadding), _centerMagnifier),
_buildSecondColumn(const EdgeInsetsDirectional.only(start: _kTimerPickerHalfColumnPadding, end: paddingValue / 2), _rightMagnifier),
];
break;
}
Expand Down