Skip to content

F
Front-End
Unverified Commit f29f05ed authored by Rami's avatar Rami Committed by GitHub
Browse files
Options

Address misc time picker design issues (#62803)

parent 84974968
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 18 deletions
packages/flutter/lib/src/material/time_picker.dart
View file @ f29f05ed
......@@ -162,9 +162,17 @@ class _TimePickerHeader extends StatelessWidget {
),
const SizedBox(width: 12.0),
],
Expanded(child: _HourControl(fragmentContext: fragmentContext)),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
Expanded(child: _MinuteControl(fragmentContext: fragmentContext)),
Expanded(
child: Row(
// Hour/minutes should not change positions in RTL locales.
textDirection: TextDirection.ltr,
children: <Widget>[
Expanded(child: _HourControl(fragmentContext: fragmentContext)),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
Expanded(child: _MinuteControl(fragmentContext: fragmentContext)),
],
),
),
if (!use24HourDials && timeOfDayFormat != TimeOfDayFormat.a_space_h_colon_mm) ...<Widget>[
const SizedBox(width: 12.0),
_DayPeriodControl(
......@@ -195,6 +203,8 @@ class _TimePickerHeader extends StatelessWidget {
Container(
height: kMinInteractiveDimension * 2,
child: Row(
// Hour/minutes should not change positions in RTL locales.
textDirection: TextDirection.ltr,
children: <Widget>[
Expanded(child: _HourControl(fragmentContext: fragmentContext)),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
......@@ -1126,7 +1136,7 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
];
_TappableLabel _buildTappableLabel(TextTheme textTheme, Color color, int value, String label, VoidCallback onTap) {
final TextStyle style = textTheme.subtitle1.copyWith(color: color);
final TextStyle style = textTheme.bodyText1.copyWith(color: color);
final double labelScaleFactor = math.min(MediaQuery.of(context).textScaleFactor, 2.0);
return _TappableLabel(
value: value,
......@@ -1201,8 +1211,8 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
final TimePickerThemeData pickerTheme = TimePickerTheme.of(context);
final Color backgroundColor = pickerTheme.dialBackgroundColor ?? themeData.colorScheme.onBackground.withOpacity(0.12);
final Color accentColor = pickerTheme.dialHandColor ?? themeData.colorScheme.primary;
final Color primaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{});
final Color secondaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{MaterialState.selected});
final Color primaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{}) ?? themeData.colorScheme.onSurface;
final Color secondaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{MaterialState.selected}) ?? themeData.colorScheme.onPrimary;
List<_TappableLabel> primaryLabels;
List<_TappableLabel> secondaryLabels;
int selectedDialValue;
......@@ -1539,11 +1549,9 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> {
if (inputDecorationTheme != null) {
inputDecoration = const InputDecoration().applyDefaults(inputDecorationTheme);
} else {
final Color unfocusedFillColor = timePickerTheme.hourMinuteColor ?? colorScheme.onSurface.withOpacity(0.12);
inputDecoration = InputDecoration(
contentPadding: EdgeInsets.zero,
filled: true,
fillColor: focusNode.hasFocus ? Colors.transparent : unfocusedFillColor,
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
......@@ -1561,10 +1569,12 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> {
errorStyle: const TextStyle(fontSize: 0.0, height: 0.0), // Prevent the error text from appearing.
);
}
final Color unfocusedFillColor = timePickerTheme.hourMinuteColor ?? colorScheme.onSurface.withOpacity(0.12);
inputDecoration = inputDecoration.copyWith(
// Remove the hint text when focused because the centered cursor appears
// odd above the hint text.
hintText: focusNode.hasFocus ? null : _formattedValue,
fillColor: focusNode.hasFocus ? Colors.transparent : inputDecorationTheme?.fillColor ?? unfocusedFillColor,
);
return SizedBox(
......@@ -1574,10 +1584,13 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> {
child: TextFormField(
expands: true,
maxLines: null,
inputFormatters: <TextInputFormatter>[
LengthLimitingTextInputFormatter(2),
],
focusNode: focusNode,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
style: widget.style.copyWith(color: colorScheme.onSurface),
style: widget.style.copyWith(color: timePickerTheme.hourMinuteTextColor ?? colorScheme.onSurface),
controller: controller,
decoration: inputDecoration,
validator: widget.validator,
......
packages/flutter/test/material/time_picker_test.dart
View file @ f29f05ed
......@@ -797,7 +797,7 @@ void _testsInput() {
// Invalid minute.
await tester.enterText(find.byType(TextField).first, '8');
await tester.enterText(find.byType(TextField).last, '150');
await tester.enterText(find.byType(TextField).last, '95');
await finishPicker(tester);
expect(result, null);
......
packages/flutter/test/material/time_picker_theme_test.dart
View file @ f29f05ed
......@@ -158,14 +158,16 @@ void main() {
final List<dynamic> primaryLabels = dialPainter.primaryLabels as List<dynamic>;
expect(
primaryLabels.first.painter.text.style,
Typography.material2014().englishLike.subhead
.merge(Typography.material2014().black.subhead),
Typography.material2014().englishLike.bodyText1
.merge(Typography.material2014().black.bodyText1)
.copyWith(color: defaultTheme.colorScheme.onSurface),
);
final List<dynamic> secondaryLabels = dialPainter.secondaryLabels as List<dynamic>;
expect(
secondaryLabels.first.painter.text.style,
Typography.material2014().englishLike.subhead
.merge(Typography.material2014().white.subhead),
Typography.material2014().englishLike.bodyText1
.merge(Typography.material2014().white.bodyText1)
.copyWith(color: defaultTheme.colorScheme.onPrimary),
);
final Material hourMaterial = _textMaterial(tester, '7');
......@@ -297,15 +299,15 @@ void main() {
final List<dynamic> primaryLabels = dialPainter.primaryLabels as List<dynamic>;
expect(
primaryLabels.first.painter.text.style,
Typography.material2014().englishLike.subhead
.merge(Typography.material2014().black.subhead)
Typography.material2014().englishLike.bodyText1
.merge(Typography.material2014().black.bodyText1)
.copyWith(color: _unselectedColor),
);
final List<dynamic> secondaryLabels = dialPainter.secondaryLabels as List<dynamic>;
expect(
secondaryLabels.first.painter.text.style,
Typography.material2014().englishLike.subhead
.merge(Typography.material2014().white.subhead)
Typography.material2014().englishLike.bodyText1
.merge(Typography.material2014().white.bodyText1)
.copyWith(color: _selectedColor),
);
......
packages/flutter_localizations/test/material/time_picker_test.dart
View file @ f29f05ed
......@@ -78,6 +78,7 @@ void main() {
const Locale('es', 'ES'), //'H:mm'
const Locale('fr', 'CA'), //'HH \'h\' mm'
const Locale('zh', 'ZH'), //'ah:mm'
const Locale('fa', 'IR'), //'H:mm' but RTL
];
for (final Locale locale in locales) {
......@@ -114,6 +115,12 @@ void main() {
expect(dayPeriodLeftOffset, lessThan(hourLeftOffset));
expect(hourLeftOffset, lessThan(stringFragmentLeftOffset));
expect(stringFragmentLeftOffset, lessThan(minuteLeftOffset));
} else if (locale == const Locale('fa', 'IR')) {
// Even though this is an RTL locale, the hours and minutes positions should remain the same.
expect(stringFragmentText.data, ':');
expect(hourLeftOffset, lessThan(stringFragmentLeftOffset));
expect(stringFragmentLeftOffset, lessThan(minuteLeftOffset));
expect(dayPeriodControlFinder, findsNothing);
}
await tester.tapAt(Offset(center.dx, center.dy - 50.0));
await finishPicker(tester);
......@@ -143,6 +150,7 @@ void main() {
const Locale('es', 'ES'), //'H:mm'
const Locale('fr', 'CA'), //'HH \'h\' mm'
const Locale('zh', 'ZH'), //'ah:mm'
const Locale('fa', 'IR'), //'H:mm' but RTL
];
for (final Locale locale in locales) {
......@@ -184,6 +192,12 @@ void main() {
expect(stringFragmentLeftOffset, lessThan(minuteLeftOffset));
expect(hourLeftOffset, dayPeriodLeftOffset);
expect(hourTopOffset, greaterThan(dayPeriodTopOffset));
} else if (locale == const Locale('fa', 'IR')) {
// Even though this is an RTL locale, the hours and minutes positions should remain the same.
expect(stringFragmentText.data, ':');
expect(hourLeftOffset, lessThan(stringFragmentLeftOffset));
expect(stringFragmentLeftOffset, lessThan(minuteLeftOffset));
expect(dayPeriodControlFinder, findsNothing);
}
await tester.tapAt(Offset(center.dx, center.dy - 50.0));
await finishPicker(tester);
......
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

HIAST - GitLab