firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use OverflowBar instead of ButtonBar in TimePicker (#62601)

Browse Source
This commit is contained in:
Hans Muller 2020-08-03 14:26:43 -07:00 committed by GitHub
parent e3c3d6eb7e
commit 17d317977b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 105 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/flutter/lib/src/material/time_picker.dart
View File

@ -11,8 +11,6 @@ import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'button_bar.dart';
import 'button_theme.dart';
import 'color_scheme.dart'; import 'color_scheme.dart';
import 'colors.dart'; import 'colors.dart';
import 'constants.dart'; import 'constants.dart';
@ -1827,19 +1825,24 @@ class _TimePickerDialogState extends State<_TimePickerDialog> {
: MaterialLocalizations.of(context).dialModeButtonLabel, : MaterialLocalizations.of(context).dialModeButtonLabel,
), ),
Expanded( Expanded(
// TODO(rami-a): Move away from ButtonBar to avoid https://github.com/flutter/flutter/issues/53378. child: Container(
child: ButtonBar( alignment: AlignmentDirectional.centerEnd,
layoutBehavior: ButtonBarLayoutBehavior.constrained, constraints: const BoxConstraints(minHeight: 52.0),
children: <Widget>[ padding: const EdgeInsets.symmetric(horizontal: 8),
TextButton( child: OverflowBar(
onPressed: _handleCancel, spacing: 8,
child: Text(widget.cancelText ?? localizations.cancelButtonLabel), overflowAlignment: OverflowBarAlignment.end,
), children: <Widget>[
TextButton( TextButton(
onPressed: _handleOk, onPressed: _handleCancel,
child: Text(widget.confirmText ?? localizations.okButtonLabel), child: Text(widget.cancelText ?? localizations.cancelButtonLabel),
), ),
], TextButton(
onPressed: _handleOk,
child: Text(widget.confirmText ?? localizations.okButtonLabel),
),
],
),
), ),
), ),
], ],

128
packages/flutter/test/material/time_picker_test.dart
View File

@ -643,54 +643,100 @@ void _tests() {
expect(find.text(helperText), findsOneWidget); expect(find.text(helperText), findsOneWidget);
}); });
// TODO(rami-a): Re-enable and fix test. testWidgets('OK Cancel button layout', (WidgetTester tester) async {
testWidgets('text scale affects certain elements and not others', Widget buildFrame(TextDirection textDirection) {
(WidgetTester tester) async { return MaterialApp(
await mediaQueryBoilerplate( home: Material(
tester, child: Center(
false, child: Builder(
textScaleFactor: 1.0, builder: (BuildContext context) {
initialTime: const TimeOfDay(hour: 7, minute: 41), return ElevatedButton(
); child: const Text('X'),
await tester.tap(find.text('X')); onPressed: () {
await tester.pumpAndSettle(); showTimePicker(
context: context,
initialTime: const TimeOfDay(hour: 7, minute: 0),
builder: (BuildContext context, Widget child) {
return Directionality(
textDirection: textDirection,
child: child,
);
},
);
},
);
},
),
),
),
);
}
final double minutesDisplayHeight = tester.getSize(find.text('41')).height; await tester.pumpWidget(buildFrame(TextDirection.ltr));
final double amHeight = tester.getSize(find.text('AM')).height; await tester.tap(find.text('X'));
await tester.pumpAndSettle();
expect(tester.getBottomRight(find.text('OK')).dx, 638);
expect(tester.getBottomLeft(find.text('OK')).dx, 610);
expect(tester.getBottomRight(find.text('CANCEL')).dx, 576);
await tester.tap(find.text('OK'));
await tester.pumpAndSettle();
await tester.tap(find.text('OK')); // dismiss the dialog await tester.pumpWidget(buildFrame(TextDirection.rtl));
await tester.pumpAndSettle(); await tester.tap(find.text('X'));
await tester.pumpAndSettle();
expect(tester.getBottomLeft(find.text('OK')).dx, 162);
expect(tester.getBottomRight(find.text('OK')).dx, 190);
expect(tester.getBottomLeft(find.text('CANCEL')).dx, 224);
await tester.tap(find.text('OK'));
await tester.pumpAndSettle();
});
// Verify that the time display is not affected by text scale. testWidgets('text scale affects certain elements and not others', (WidgetTester tester) async {
await mediaQueryBoilerplate( await mediaQueryBoilerplate(
tester, tester,
false, false,
textScaleFactor: 2.0, textScaleFactor: 1.0,
initialTime: const TimeOfDay(hour: 7, minute: 41), initialTime: const TimeOfDay(hour: 7, minute: 41),
); );
await tester.tap(find.text('X')); await tester.tap(find.text('X'));
await tester.pumpAndSettle(); await tester.pumpAndSettle();
final double amHeight2x = tester.getSize(find.text('AM')).height; final double minutesDisplayHeight = tester.getSize(find.text('41')).height;
expect(tester.getSize(find.text('41')).height, equals(minutesDisplayHeight)); final double amHeight = tester.getSize(find.text('AM')).height;
expect(amHeight2x, greaterThanOrEqualTo(amHeight * 2));
await tester.tap(find.text('OK')); // dismiss the dialog await tester.tap(find.text('OK')); // dismiss the dialog
await tester.pumpAndSettle(); await tester.pumpAndSettle();
// Verify that text scale for AM/PM is at most 2x. // Verify that the time display is not affected by text scale.
await mediaQueryBoilerplate( await mediaQueryBoilerplate(
tester, tester,
false, false,
textScaleFactor: 3.0, textScaleFactor: 2.0,
initialTime: const TimeOfDay(hour: 7, minute: 41), initialTime: const TimeOfDay(hour: 7, minute: 41),
); );
await tester.tap(find.text('X')); await tester.tap(find.text('X'));
await tester.pumpAndSettle(); await tester.pumpAndSettle();
expect(tester.getSize(find.text('41')).height, equals(minutesDisplayHeight)); final double amHeight2x = tester.getSize(find.text('AM')).height;
expect(tester.getSize(find.text('AM')).height, equals(amHeight2x)); expect(tester.getSize(find.text('41')).height, equals(minutesDisplayHeight));
}); expect(amHeight2x, greaterThanOrEqualTo(amHeight * 2));
await tester.tap(find.text('OK')); // dismiss the dialog
await tester.pumpAndSettle();
// Verify that text scale for AM/PM is at most 2x.
await mediaQueryBoilerplate(
tester,
false,
textScaleFactor: 3.0,
initialTime: const TimeOfDay(hour: 7, minute: 41),
);
await tester.tap(find.text('X'));
await tester.pumpAndSettle();
expect(tester.getSize(find.text('41')).height, equals(minutesDisplayHeight));
expect(tester.getSize(find.text('AM')).height, equals(amHeight2x));
});
} }
void _testsInput() { void _testsInput() {