Commit 8c048ec9 authored by Adam Barth's avatar Adam Barth Committed by GitHub

Polish SnackBar padding (#6071)

Previously, we were getting double padding: both inside and outside the button.
This patch moves all the padding inside the button so that the whole region is
hittable and the text is positioned correctly.

Fixes #6059
parent bc9b32b9
...@@ -14,7 +14,7 @@ import 'theme.dart'; ...@@ -14,7 +14,7 @@ import 'theme.dart';
import 'typography.dart'; import 'typography.dart';
// https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs // https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs
const double _kSideMargins = 24.0; const double _kSnackBarPadding = 24.0;
const double _kSingleLineVerticalPadding = 14.0; const double _kSingleLineVerticalPadding = 14.0;
const double _kMultiLineVerticalTopPadding = 24.0; const double _kMultiLineVerticalTopPadding = 24.0;
const double _kMultiLineVerticalSpaceBetweenTextAndButtons = 10.0; const double _kMultiLineVerticalSpaceBetweenTextAndButtons = 10.0;
...@@ -83,13 +83,9 @@ class _SnackBarActionState extends State<SnackBarAction> { ...@@ -83,13 +83,9 @@ class _SnackBarActionState extends State<SnackBarAction> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Container( return new FlatButton(
margin: const EdgeInsets.only(left: _kSideMargins), onPressed: _haveTriggeredAction ? null : _handlePressed,
child: new FlatButton( child: new Text(config.label)
onPressed: _haveTriggeredAction ? null : _handlePressed,
textTheme: ButtonTextTheme.accent,
child: new Text(config.label)
)
); );
} }
} }
...@@ -139,9 +135,10 @@ class SnackBar extends StatelessWidget { ...@@ -139,9 +135,10 @@ class SnackBar extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
assert(animation != null); assert(animation != null);
List<Widget> children = <Widget>[ List<Widget> children = <Widget>[
const SizedBox(width: _kSnackBarPadding),
new Flexible( new Flexible(
child: new Container( child: new Container(
margin: const EdgeInsets.symmetric(vertical: _kSingleLineVerticalPadding), padding: const EdgeInsets.symmetric(vertical: _kSingleLineVerticalPadding),
child: new DefaultTextStyle( child: new DefaultTextStyle(
style: Typography.white.subhead, style: Typography.white.subhead,
child: content child: content
...@@ -149,8 +146,15 @@ class SnackBar extends StatelessWidget { ...@@ -149,8 +146,15 @@ class SnackBar extends StatelessWidget {
) )
) )
]; ];
if (action != null) if (action != null) {
children.add(action); children.add(new ButtonTheme.bar(
padding: const EdgeInsets.symmetric(horizontal: _kSnackBarPadding),
textTheme: ButtonTextTheme.accent,
child: action
));
} else {
children.add(const SizedBox(width: _kSnackBarPadding));
}
CurvedAnimation heightAnimation = new CurvedAnimation(parent: animation, curve: _snackBarHeightCurve); CurvedAnimation heightAnimation = new CurvedAnimation(parent: animation, curve: _snackBarHeightCurve);
CurvedAnimation fadeAnimation = new CurvedAnimation(parent: animation, curve: _snackBarFadeCurve, reverseCurve: const Threshold(0.0)); CurvedAnimation fadeAnimation = new CurvedAnimation(parent: animation, curve: _snackBarFadeCurve, reverseCurve: const Threshold(0.0));
ThemeData theme = Theme.of(context); ThemeData theme = Theme.of(context);
...@@ -176,21 +180,18 @@ class SnackBar extends StatelessWidget { ...@@ -176,21 +180,18 @@ class SnackBar extends StatelessWidget {
child: new Material( child: new Material(
elevation: 6, elevation: 6,
color: _kSnackBackground, color: _kSnackBackground,
child: new Container( child: new Theme(
margin: const EdgeInsets.symmetric(horizontal: _kSideMargins), data: new ThemeData(
child: new Theme( brightness: Brightness.dark,
data: new ThemeData( accentColor: theme.accentColor,
brightness: Brightness.dark, accentColorBrightness: theme.accentColorBrightness,
accentColor: theme.accentColor, textTheme: Typography.white
accentColorBrightness: theme.accentColorBrightness, ),
textTheme: Typography.white child: new FadeTransition(
), opacity: fadeAnimation,
child: new FadeTransition( child: new Row(
opacity: fadeAnimation, children: children,
child: new Row( crossAxisAlignment: CrossAxisAlignment.center
children: children,
crossAxisAlignment: CrossAxisAlignment.center
)
) )
) )
) )
......
...@@ -782,7 +782,7 @@ class CustomMultiChildLayout extends MultiChildRenderObjectWidget { ...@@ -782,7 +782,7 @@ class CustomMultiChildLayout extends MultiChildRenderObjectWidget {
/// height, treating nulls as zero. /// height, treating nulls as zero.
class SizedBox extends SingleChildRenderObjectWidget { class SizedBox extends SingleChildRenderObjectWidget {
/// Creates a box of a specific size. /// Creates a box of a specific size.
SizedBox({ Key key, this.width, this.height, Widget child }) const SizedBox({ Key key, this.width, this.height, Widget child })
: super(key: key, child: child); : super(key: key, child: child);
/// If non-null, requires the child to have exactly this width. /// If non-null, requires the child to have exactly this width.
......
...@@ -295,4 +295,43 @@ void main() { ...@@ -295,4 +295,43 @@ void main() {
await tester.tap(find.text('ACTION')); await tester.tap(find.text('ACTION'));
expect(tapCount, equals(1)); expect(tapCount, equals(1));
}); });
testWidgets('SnackBar button text alignment', (WidgetTester tester) async {
await tester.pumpWidget(new MaterialApp(
home: new Scaffold(
body: new Builder(
builder: (BuildContext context) {
return new GestureDetector(
onTap: () {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('I am a snack bar.'),
duration: new Duration(seconds: 2),
action: new SnackBarAction(label: 'ACTION', onPressed: () {})
));
},
child: new Text('X')
);
}
)
)
));
await tester.tap(find.text('X'));
await tester.pump(); // start animation
await tester.pump(const Duration(milliseconds: 750));
RenderBox textBox = tester.firstRenderObject(find.text('I am a snack bar.'));
RenderBox actionTextBox = tester.firstRenderObject(find.text('ACTION'));
RenderBox snackBarBox = tester.firstRenderObject(find.byType(SnackBar));
Point textBottomLeft = textBox.localToGlobal(textBox.size.bottomLeft(Point.origin));
Point textBottomRight = textBox.localToGlobal(textBox.size.bottomRight(Point.origin));
Point actionTextBottomLeft = actionTextBox.localToGlobal(actionTextBox.size.bottomLeft(Point.origin));
Point actionTextBottomRight = actionTextBox.localToGlobal(actionTextBox.size.bottomRight(Point.origin));
Point snackBarBottomLeft = snackBarBox.localToGlobal(snackBarBox.size.bottomLeft(Point.origin));
Point snackBarBottomRight = snackBarBox.localToGlobal(snackBarBox.size.bottomRight(Point.origin));
expect(textBottomLeft.x - snackBarBottomLeft.x, 24.0);
expect(actionTextBottomLeft.x - textBottomRight.x, 24.0);
expect(snackBarBottomRight.x - actionTextBottomRight.x, 24.0);
});
} }
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