Skip to content

F
Front-End
Unverified Commit 6f56ba45 authored by Anthony's avatar Anthony Committed by GitHub
Browse files
Options

Automatically scale down Dialog padding for larger text scale factors (#58245)

parent b010f78e
Show whitespace changes
Inline Side-by-side
Showing with 479 additions and 22 deletions
packages/flutter/lib/src/material/dialog.dart
View file @ 6f56ba45
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
// @dart = 2.8 // @dart = 2.8
import 'dart:async'; import 'dart:async';
import 'dart:ui';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
...@@ -310,7 +311,10 @@ class AlertDialog extends StatelessWidget { ...@@ -310,7 +311,10 @@ class AlertDialog extends StatelessWidget {
/// The (optional) set of actions that are displayed at the bottom of the /// The (optional) set of actions that are displayed at the bottom of the
/// dialog. /// dialog.
/// ///
/// Typically this is a list of [FlatButton] widgets. /// Typically this is a list of [FlatButton] widgets. It is recommended to
/// set the [textAlign] to [TextAlign.end] for the [Text] within the
/// [FlatButton], so that buttons whose labels wrap to an extra line align
/// with the overall [ButtonBar]'s alignment within the dialog.
/// ///
/// These widgets will be wrapped in a [ButtonBar], which introduces 8 pixels /// These widgets will be wrapped in a [ButtonBar], which introduces 8 pixels
/// of padding on each side. /// of padding on each side.
...@@ -466,12 +470,24 @@ class AlertDialog extends StatelessWidget { ...@@ -466,12 +470,24 @@ class AlertDialog extends StatelessWidget {
} }
} }
// The paddingScaleFactor is used to adjust the padding of Dialog's
// children.
final double paddingScaleFactor = _paddingScaleFactor(MediaQuery.of(context).textScaleFactor);
final TextDirection textDirection = Directionality.of(context);
Widget titleWidget; Widget titleWidget;
Widget contentWidget; Widget contentWidget;
Widget actionsWidget; Widget actionsWidget;
if (title != null) if (title != null) {
final EdgeInsets defaultTitlePadding = EdgeInsets.fromLTRB(24.0, 24.0, 24.0, content == null ? 20.0 : 0.0);
final EdgeInsets effectiveTitlePadding = titlePadding?.resolve(textDirection) ?? defaultTitlePadding;
titleWidget = Padding( titleWidget = Padding(
padding: titlePadding ?? EdgeInsets.fromLTRB(24.0, 24.0, 24.0, content == null ? 20.0 : 0.0), padding: EdgeInsets.only(
left: effectiveTitlePadding.left * paddingScaleFactor,
right: effectiveTitlePadding.right * paddingScaleFactor,
top: effectiveTitlePadding.top * paddingScaleFactor,
bottom: effectiveTitlePadding.bottom,
),
child: DefaultTextStyle( child: DefaultTextStyle(
style: titleTextStyle ?? dialogTheme.titleTextStyle ?? theme.textTheme.headline6, style: titleTextStyle ?? dialogTheme.titleTextStyle ?? theme.textTheme.headline6,
child: Semantics( child: Semantics(
...@@ -481,17 +497,26 @@ class AlertDialog extends StatelessWidget { ...@@ -481,17 +497,26 @@ class AlertDialog extends StatelessWidget {
), ),
), ),
); );
}
if (content != null) if (content != null) {
final EdgeInsets effectiveContentPadding = contentPadding.resolve(textDirection);
contentWidget = Padding( contentWidget = Padding(
padding: contentPadding, padding: EdgeInsets.only(
left: effectiveContentPadding.left * paddingScaleFactor,
right: effectiveContentPadding.right * paddingScaleFactor,
top: title == null ? effectiveContentPadding.top * paddingScaleFactor : effectiveContentPadding.top,
bottom: effectiveContentPadding.bottom,
),
child: DefaultTextStyle( child: DefaultTextStyle(
style: contentTextStyle ?? dialogTheme.contentTextStyle ?? theme.textTheme.subtitle1, style: contentTextStyle ?? dialogTheme.contentTextStyle ?? theme.textTheme.subtitle1,
child: content, child: content,
), ),
); );
}
if (actions != null)
if (actions != null) {
actionsWidget = Padding( actionsWidget = Padding(
padding: actionsPadding, padding: actionsPadding,
child: ButtonBar( child: ButtonBar(
...@@ -501,6 +526,7 @@ class AlertDialog extends StatelessWidget { ...@@ -501,6 +526,7 @@ class AlertDialog extends StatelessWidget {
children: actions, children: actions,
), ),
); );
}
List<Widget> columnChildren; List<Widget> columnChildren;
if (scrollable) { if (scrollable) {
...@@ -805,6 +831,44 @@ class SimpleDialog extends StatelessWidget { ...@@ -805,6 +831,44 @@ class SimpleDialog extends StatelessWidget {
} }
} }
// The paddingScaleFactor is used to adjust the padding of Dialog
// children.
final double paddingScaleFactor = _paddingScaleFactor(MediaQuery.of(context).textScaleFactor);
final TextDirection textDirection = Directionality.of(context);
Widget titleWidget;
if (title != null) {
final EdgeInsets effectiveTitlePadding = titlePadding.resolve(textDirection);
titleWidget = Padding(
padding: EdgeInsets.only(
left: effectiveTitlePadding.left * paddingScaleFactor,
right: effectiveTitlePadding.right * paddingScaleFactor,
top: effectiveTitlePadding.top * paddingScaleFactor,
bottom: children == null ? effectiveTitlePadding.bottom * paddingScaleFactor : effectiveTitlePadding.bottom,
),
child: DefaultTextStyle(
style: titleTextStyle ?? DialogTheme.of(context).titleTextStyle ?? theme.textTheme.headline6,
child: Semantics(namesRoute: true, child: title),
),
);
}
Widget contentWidget;
if (children != null) {
final EdgeInsets effectiveContentPadding = contentPadding.resolve(textDirection);
contentWidget = Flexible(
child: SingleChildScrollView(
padding: EdgeInsets.only(
left: effectiveContentPadding.left * paddingScaleFactor,
right: effectiveContentPadding.right * paddingScaleFactor,
top: title == null ? effectiveContentPadding.top * paddingScaleFactor : effectiveContentPadding.top,
bottom: effectiveContentPadding.bottom * paddingScaleFactor,
),
child: ListBody(children: children),
),
);
}
Widget dialogChild = IntrinsicWidth( Widget dialogChild = IntrinsicWidth(
stepWidth: 56.0, stepWidth: 56.0,
child: ConstrainedBox( child: ConstrainedBox(
...@@ -814,20 +878,9 @@ class SimpleDialog extends StatelessWidget { ...@@ -814,20 +878,9 @@ class SimpleDialog extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
if (title != null) if (title != null)
Padding( titleWidget,
padding: titlePadding,
child: DefaultTextStyle(
style: titleTextStyle ?? DialogTheme.of(context).titleTextStyle ?? theme.textTheme.headline6,
child: Semantics(namesRoute: true, child: title),
),
),
if (children != null) if (children != null)
Flexible( contentWidget,
child: SingleChildScrollView(
padding: contentPadding,
child: ListBody(children: children),
),
),
], ],
), ),
), ),
...@@ -959,3 +1012,10 @@ Future<T> showDialog<T>({ ...@@ -959,3 +1012,10 @@ Future<T> showDialog<T>({
routeSettings: routeSettings, routeSettings: routeSettings,
); );
} }
double _paddingScaleFactor(double textScaleFactor) {
final double clampedTextScaleFactor = textScaleFactor.clamp(1.0, 2.0).toDouble();
// The final padding scale factor is clamped between 1/3 and 1. For example,
// a non-scaled padding of 24 will produce a padding between 24 and 8.
return lerpDouble(1.0, 1.0 / 3.0, clampedTextScaleFactor - 1.0);
}
packages/flutter/test/material/dialog_test.dart
View file @ 6f56ba45
...@@ -13,7 +13,7 @@ import 'package:matcher/matcher.dart'; ...@@ -13,7 +13,7 @@ import 'package:matcher/matcher.dart';
import '../widgets/semantics_tester.dart'; import '../widgets/semantics_tester.dart';
MaterialApp _buildAppWithDialog(Widget dialog, { ThemeData theme }) { MaterialApp _buildAppWithDialog(Widget dialog, { ThemeData theme, double textScaleFactor = 1.0 }) {
return MaterialApp( return MaterialApp(
theme: theme, theme: theme,
home: Material( home: Material(
...@@ -26,7 +26,10 @@ MaterialApp _buildAppWithDialog(Widget dialog, { ThemeData theme }) { ...@@ -26,7 +26,10 @@ MaterialApp _buildAppWithDialog(Widget dialog, { ThemeData theme }) {
showDialog<void>( showDialog<void>(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return dialog; return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: textScaleFactor),
child: dialog,
);
}, },
); );
}, },
...@@ -644,6 +647,400 @@ void main() { ...@@ -644,6 +647,400 @@ void main() {
); // right ); // right
}); });
group('Dialog children padding is correct', () {
final List<double> textScaleFactors = <double>[0.5, 1.0, 1.5, 2.0, 3.0];
final Map<double, double> paddingScaleFactors = <double, double>{
0.5: 1.0,
1.0: 1.0,
1.5: 2.0 / 3.0,
2.0: 1.0 / 3.0,
3.0: 1.0 / 3.0,
};
final GlobalKey titleKey = GlobalKey();
final GlobalKey contentKey = GlobalKey();
final GlobalKey childrenKey = GlobalKey();
final Finder dialogFinder = find.descendant(of: find.byType(Dialog), matching: find.byType(Material)).first;
final Finder titleFinder = find.byKey(titleKey);
final Finder contentFinder = find.byKey(contentKey);
final Finder actionsFinder = find.byType(ButtonBar);
final Finder childrenFinder = find.byKey(childrenKey);
Future<void> openDialog(WidgetTester tester, Widget dialog, double textScaleFactor) async {
await tester.pumpWidget(
_buildAppWithDialog(dialog, textScaleFactor: textScaleFactor),
);
await tester.tap(find.text('X'));
await tester.pumpAndSettle();
}
void expectLeftEdgePadding(
WidgetTester tester, {
Finder finder,
double textScaleFactor,
double unscaledValue,
}) {
expect(
tester.getTopLeft(dialogFinder).dx,
closeTo(tester.getTopLeft(finder).dx - unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
expect(
tester.getBottomLeft(dialogFinder).dx,
closeTo(tester.getBottomLeft(finder).dx - unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
}
void expectRightEdgePadding(
WidgetTester tester, {
Finder finder,
double textScaleFactor,
double unscaledValue,
}) {
expect(
tester.getTopRight(dialogFinder).dx,
closeTo(tester.getTopRight(finder).dx + unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
expect(
tester.getBottomRight(dialogFinder).dx,
closeTo(tester.getBottomRight(finder).dx + unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
}
void expectTopEdgePadding(
WidgetTester tester, {
Finder finder,
double textScaleFactor,
double unscaledValue,
}) {
expect(
tester.getTopLeft(dialogFinder).dy,
closeTo(tester.getTopLeft(finder).dy - unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
expect(
tester.getTopRight(dialogFinder).dy,
closeTo(tester.getTopRight(finder).dy - unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
}
void expectBottomEdgePadding(
WidgetTester tester, {
Finder finder,
double textScaleFactor,
double unscaledValue,
}) {
expect(
tester.getBottomLeft(dialogFinder).dy,
closeTo(tester.getBottomRight(finder).dy + unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
expect(
tester.getBottomRight(dialogFinder).dy,
closeTo(tester.getBottomRight(finder).dy + unscaledValue * paddingScaleFactors[textScaleFactor], 1e-6),
);
}
void expectVerticalInnerPadding(
WidgetTester tester, {
Finder top,
Finder bottom,
double value,
}) {
expect(
tester.getBottomLeft(top).dy,
tester.getTopLeft(bottom).dy - value,
);
expect(
tester.getBottomRight(top).dy,
tester.getTopRight(bottom).dy - value,
);
}
final Widget title = Text(
'title',
key: titleKey,
);
final Widget content = Text(
'content',
key: contentKey,
);
final List<Widget> actions = <Widget>[
RaisedButton(
onPressed: () {},
child: const Text('button'),
),
];
final List<Widget> children = <Widget>[
SimpleDialogOption(
key: childrenKey,
child: const Text('child'),
onPressed: () { },
),
];
for (final double textScaleFactor in textScaleFactors) {
testWidgets('AlertDialog padding is correct when only title and actions are specified [textScaleFactor]=$textScaleFactor}', (WidgetTester tester) async {
final AlertDialog dialog = AlertDialog(
title: title,
actions: actions,
);
await openDialog(tester, dialog, textScaleFactor);
expectTopEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectLeftEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectRightEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectVerticalInnerPadding(
tester,
top: titleFinder,
bottom: actionsFinder,
value: 20.0,
);
expectLeftEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectRightEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectBottomEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
});
testWidgets('AlertDialog padding is correct when only content and actions are specified [textScaleFactor]=$textScaleFactor}', (WidgetTester tester) async {
final AlertDialog dialog = AlertDialog(
content: content,
actions: actions,
);
await openDialog(tester, dialog, textScaleFactor);
expectTopEdgePadding(
tester,
finder: contentFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 20.0,
);
expectLeftEdgePadding(
tester,
finder: contentFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectRightEdgePadding(
tester,
finder: contentFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectVerticalInnerPadding(
tester,
top: contentFinder,
bottom: actionsFinder,
value: 24.0,
);
expectLeftEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectRightEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectBottomEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
});
testWidgets('AlertDialog padding is correct when title, content, and actions are specified [textScaleFactor]=$textScaleFactor}', (WidgetTester tester) async {
final AlertDialog dialog = AlertDialog(
title: title,
content: content,
actions: actions,
);
await openDialog(tester, dialog, textScaleFactor);
expectTopEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectLeftEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectRightEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectVerticalInnerPadding(
tester,
top: titleFinder,
bottom: contentFinder,
value: 20.0,
);
expectLeftEdgePadding(
tester,
finder: contentFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectRightEdgePadding(
tester,
finder: contentFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectVerticalInnerPadding(
tester,
top: contentFinder,
bottom: actionsFinder,
value: 24.0,
);
expectLeftEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectRightEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectBottomEdgePadding(
tester,
finder: actionsFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
});
testWidgets('SimpleDialog padding is correct when only children are specified [textScaleFactor]=$textScaleFactor}', (WidgetTester tester) async {
final SimpleDialog dialog = SimpleDialog(
children: children,
);
await openDialog(tester, dialog, textScaleFactor);
expectTopEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 12.0,
);
expectLeftEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectRightEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectBottomEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 16.0,
);
});
testWidgets('SimpleDialog padding is correct when title and children are specified [textScaleFactor]=$textScaleFactor}', (WidgetTester tester) async {
final SimpleDialog dialog = SimpleDialog(
title: title,
children: children,
);
await openDialog(tester, dialog, textScaleFactor);
expectTopEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectLeftEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectRightEdgePadding(
tester,
finder: titleFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 24.0,
);
expectVerticalInnerPadding(
tester,
top: titleFinder,
bottom: childrenFinder,
value: 12.0,
);
expectLeftEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectRightEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 0.0,
);
expectBottomEdgePadding(
tester,
finder: childrenFinder,
textScaleFactor: textScaleFactor,
unscaledValue: 16.0,
);
});
}
});
testWidgets('Dialogs can set the vertical direction of overflowing actions', (WidgetTester tester) async { testWidgets('Dialogs can set the vertical direction of overflowing actions', (WidgetTester tester) async {
final GlobalKey key1 = GlobalKey(); final GlobalKey key1 = GlobalKey();
final GlobalKey key2 = GlobalKey(); final GlobalKey key2 = GlobalKey();
......
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