Skip to content

F
Front-End
Unverified Commit 7132083b authored by Todd Volkert's avatar Todd Volkert Committed by GitHub
Browse files
Options

Partially revert #13711 (#13745) 

This reverts the change to `user_accounts_drawer_header.dart`
(and the associated test), as it was causing regressions in layout
of the drawer header.

https://github.com/flutter/flutter/issues/13743
parent 36bd9ee0
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 219 deletions
packages/flutter/lib/src/material/user_accounts_drawer_header.dart
View file @ 7132083b
...@@ -10,7 +10,6 @@ import 'debug.dart'; ...@@ -10,7 +10,6 @@ import 'debug.dart';
import 'drawer_header.dart'; import 'drawer_header.dart';
import 'icons.dart'; import 'icons.dart';
import 'ink_well.dart'; import 'ink_well.dart';
import 'material_localizations.dart';
import 'theme.dart'; import 'theme.dart';
class _AccountPictures extends StatelessWidget { class _AccountPictures extends StatelessWidget {
...@@ -36,10 +35,7 @@ class _AccountPictures extends StatelessWidget { ...@@ -36,10 +35,7 @@ class _AccountPictures extends StatelessWidget {
margin: const EdgeInsetsDirectional.only(start: 16.0), margin: const EdgeInsetsDirectional.only(start: 16.0),
width: 40.0, width: 40.0,
height: 40.0, height: 40.0,
child: new Semantics( child: picture
container: true,
child: picture,
),
); );
}).toList(), }).toList(),
), ),
...@@ -49,7 +45,7 @@ class _AccountPictures extends StatelessWidget { ...@@ -49,7 +45,7 @@ class _AccountPictures extends StatelessWidget {
child: new SizedBox( child: new SizedBox(
width: 72.0, width: 72.0,
height: 72.0, height: 72.0,
child: currentAccountPicture, child: currentAccountPicture
), ),
), ),
], ],
...@@ -71,72 +67,62 @@ class _AccountDetails extends StatelessWidget { ...@@ -71,72 +67,62 @@ class _AccountDetails extends StatelessWidget {
final VoidCallback onTap; final VoidCallback onTap;
final bool isOpen; final bool isOpen;
Widget addDropdownIcon(Widget line) {
final Widget icon = new Icon(
isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down,
color: Colors.white
);
return new Expanded(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: line == null ? <Widget>[icon] : <Widget>[
new Expanded(child: line),
icon,
],
),
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context); final ThemeData theme = Theme.of(context);
final MaterialLocalizations localizations = MaterialLocalizations.of(context); Widget accountNameLine = accountName == null ? null : new DefaultTextStyle(
final Widget accountNameLine = accountName == null ? null : new DefaultTextStyle(
style: theme.primaryTextTheme.body2, style: theme.primaryTextTheme.body2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
child: accountName, child: accountName,
); );
final Widget accountEmailLine = accountEmail == null ? null : new DefaultTextStyle( Widget accountEmailLine = accountEmail == null ? null : new DefaultTextStyle(
style: theme.primaryTextTheme.body1, style: theme.primaryTextTheme.body1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
child: accountEmail, child: accountEmail,
); );
if (onTap != null) {
if (accountEmailLine != null)
accountEmailLine = addDropdownIcon(accountEmailLine);
else
accountNameLine = addDropdownIcon(accountNameLine);
}
final List<Widget> rowChildren = <Widget>[]; Widget accountDetails;
if (accountEmailLine != null || accountNameLine != null) { if (accountEmailLine != null || accountNameLine != null) {
rowChildren.add( accountDetails = new Padding(
new Expanded( padding: const EdgeInsets.symmetric(vertical: 8.0),
flex: 1, child: new Column(
child: new Padding( crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 0.0, 8.0), mainAxisAlignment: MainAxisAlignment.spaceEvenly,
child: new Column( children: (accountEmailLine != null && accountNameLine != null)
crossAxisAlignment: CrossAxisAlignment.start, ? <Widget>[accountNameLine, accountEmailLine]
mainAxisAlignment: MainAxisAlignment.spaceEvenly, : <Widget>[accountNameLine ?? accountEmailLine]
children: (accountEmailLine != null && accountNameLine != null)
? <Widget>[accountNameLine, accountEmailLine]
: <Widget>[accountNameLine ?? accountEmailLine],
),
),
), ),
); );
} }
const double kAccountDetailsHeight = 56.0; if (onTap != null)
accountDetails = new InkWell(onTap: onTap, child: accountDetails);
if (onTap != null) {
rowChildren.add(
new InkWell(
onTap: onTap,
child: new Semantics(
button: true,
child: new SizedBox(
height: kAccountDetailsHeight,
width: kAccountDetailsHeight, // make it a square
child: new Center(
child: new Icon(
isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down,
color: Colors.white,
semanticLabel: isOpen
? localizations.hideAccountsLabel
: localizations.showAccountsLabel,
),
),
),
),
),
);
}
return new SizedBox( return new SizedBox(
height: kAccountDetailsHeight, height: 56.0,
child: new Row( child: accountDetails,
children: rowChildren,
),
); );
} }
} }
...@@ -161,7 +147,7 @@ class UserAccountsDrawerHeader extends StatefulWidget { ...@@ -161,7 +147,7 @@ class UserAccountsDrawerHeader extends StatefulWidget {
this.otherAccountsPictures, this.otherAccountsPictures,
@required this.accountName, @required this.accountName,
@required this.accountEmail, @required this.accountEmail,
this.onDetailsPressed, this.onDetailsPressed
}) : super(key: key); }) : super(key: key);
/// The header's background. If decoration is null then a [BoxDecoration] /// The header's background. If decoration is null then a [BoxDecoration]
...@@ -214,32 +200,24 @@ class _UserAccountsDrawerHeaderState extends State<UserAccountsDrawerHeader> { ...@@ -214,32 +200,24 @@ class _UserAccountsDrawerHeaderState extends State<UserAccountsDrawerHeader> {
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
margin: widget.margin, margin: widget.margin,
padding: EdgeInsets.zero,
child: new SafeArea( child: new SafeArea(
bottom: false, bottom: false,
child: new Semantics( child: new Column(
container: true, crossAxisAlignment: CrossAxisAlignment.stretch,
label: 'Signed in', children: <Widget>[
child: new Column( new Expanded(
crossAxisAlignment: CrossAxisAlignment.stretch, child: new _AccountPictures(
children: <Widget>[ currentAccountPicture: widget.currentAccountPicture,
new Expanded( otherAccountsPictures: widget.otherAccountsPictures,
child: new Padding( )
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0), ),
child: new _AccountPictures( new _AccountDetails(
currentAccountPicture: widget.currentAccountPicture, accountName: widget.accountName,
otherAccountsPictures: widget.otherAccountsPictures, accountEmail: widget.accountEmail,
), isOpen: _isOpen,
), onTap: widget.onDetailsPressed == null ? null : _handleDetailsPressed,
), ),
new _AccountDetails( ],
accountName: widget.accountName,
accountEmail: widget.accountEmail,
isOpen: _isOpen,
onTap: widget.onDetailsPressed == null ? null : _handleDetailsPressed,
),
],
),
), ),
), ),
); );
......
packages/flutter/test/material/user_accounts_drawer_header_test.dart
View file @ 7132083b
...@@ -2,71 +2,58 @@ ...@@ -2,71 +2,58 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart' hide TypeMatcher; import 'package:flutter_test/flutter_test.dart';
import '../widgets/semantics_tester.dart';
const Key avatarA = const Key('A');
const Key avatarC = const Key('C');
const Key avatarD = const Key('D');
Future<Null> pumpTestWidget(WidgetTester tester, { void main() {
bool withName: true, testWidgets('UserAccountsDrawerHeader test', (WidgetTester tester) async {
bool withEmail: true, final Key avatarA = const Key('A');
bool withOnDetailsPressedHandler: true, final Key avatarC = const Key('C');
}) async { final Key avatarD = const Key('D');
await tester.pumpWidget(
new MaterialApp( await tester.pumpWidget(
home: new MediaQuery( new MaterialApp(
data: const MediaQueryData( home: new MediaQuery(
padding: const EdgeInsets.only( data: const MediaQueryData(
left: 10.0, padding: const EdgeInsets.only(
top: 20.0, left: 10.0,
right: 30.0, top: 20.0,
bottom: 40.0, right: 30.0,
bottom: 40.0,
),
), ),
), child: new Material(
child: new Material( child: new Center(
child: new Center( child: new UserAccountsDrawerHeader(
child: new UserAccountsDrawerHeader( currentAccountPicture: new CircleAvatar(
onDetailsPressed: withOnDetailsPressedHandler ? () {} : null, key: avatarA,
currentAccountPicture: const CircleAvatar( child: const Text('A'),
key: avatarA,
child: const Text('A'),
),
otherAccountsPictures: <Widget>[
const CircleAvatar(
child: const Text('B'),
), ),
const CircleAvatar( otherAccountsPictures: <Widget>[
key: avatarC, const CircleAvatar(
child: const Text('C'), child: const Text('B'),
), ),
const CircleAvatar( new CircleAvatar(
key: avatarD, key: avatarC,
child: const Text('D'), child: const Text('C'),
), ),
const CircleAvatar( new CircleAvatar(
child: const Text('E'), key: avatarD,
) child: const Text('D'),
], ),
accountName: withName ? const Text('name') : null, const CircleAvatar(
accountEmail: withEmail ? const Text('email') : null, child: const Text('E'),
)
],
accountName: const Text('name'),
accountEmail: const Text('email'),
),
), ),
), ),
), ),
), ),
), );
);
}
void main() {
testWidgets('UserAccountsDrawerHeader layout', (WidgetTester tester) async {
await pumpTestWidget(tester);
expect(find.text('A'), findsOneWidget); expect(find.text('A'), findsOneWidget);
expect(find.text('B'), findsOneWidget); expect(find.text('B'), findsOneWidget);
...@@ -139,8 +126,6 @@ void main() { ...@@ -139,8 +126,6 @@ void main() {
)); ));
expect(find.byType(Icon), findsOneWidget); expect(find.byType(Icon), findsOneWidget);
// When either email or account name (but not both!) are present, the icon
// is center aligned with the text displaying the email/name.
await tester.pumpWidget(buildFrame( await tester.pumpWidget(buildFrame(
accountName: const Text('accountName'), accountName: const Text('accountName'),
onDetailsPressed: () { }, onDetailsPressed: () { },
...@@ -159,16 +144,13 @@ void main() { ...@@ -159,16 +144,13 @@ void main() {
tester.getCenter(find.byType(Icon)).dy tester.getCenter(find.byType(Icon)).dy
); );
// When _both_ email and account name are present, the icon is placed in the
// center of the entire row. It's not aligned with text any more.
await tester.pumpWidget(buildFrame( await tester.pumpWidget(buildFrame(
accountName: const Text('accountName'), accountName: const Text('accountName'),
accountEmail: const Text('accountEmail'), accountEmail: const Text('accountEmail'),
onDetailsPressed: () { }, onDetailsPressed: () { },
)); ));
final RenderFlex row = tester.element(find.text('accountEmail')).ancestorRenderObjectOfType(const TypeMatcher<RenderFlex>());
expect( expect(
row.localToGlobal(row.size.center(Offset.zero)).dy, tester.getCenter(find.text('accountEmail')).dy,
tester.getCenter(find.byType(Icon)).dy tester.getCenter(find.byType(Icon)).dy
); );
expect( expect(
...@@ -204,83 +186,4 @@ void main() { ...@@ -204,83 +186,4 @@ void main() {
greaterThan(tester.getBottomLeft(find.byKey(avatarA)).dy) greaterThan(tester.getBottomLeft(find.byKey(avatarA)).dy)
); );
}); });
testWidgets('UserAccountsDrawerHeader provides semantics', (WidgetTester tester) async {
final SemanticsTester semantics = new SemanticsTester(tester);
await pumpTestWidget(tester);
expect(
semantics,
hasSemantics(
new TestSemantics(
children: <TestSemantics>[
new TestSemantics(
label: 'Signed in\nA\nname\nemail',
textDirection: TextDirection.ltr,
children: <TestSemantics>[
new TestSemantics(
label: r'B',
textDirection: TextDirection.ltr,
),
new TestSemantics(
label: r'C',
textDirection: TextDirection.ltr,
),
new TestSemantics(
label: r'D',
textDirection: TextDirection.ltr,
),
new TestSemantics(
flags: <SemanticsFlags>[SemanticsFlags.isButton],
actions: <SemanticsAction>[SemanticsAction.tap],
label: r'Show accounts',
textDirection: TextDirection.ltr,
),
],
),
],
),
ignoreId: true, ignoreTransform: true, ignoreRect: true,
),
);
semantics.dispose();
});
testWidgets('UserAccountsDrawerHeader provides semantics with missing properties', (WidgetTester tester) async {
final SemanticsTester semantics = new SemanticsTester(tester);
await pumpTestWidget(
tester,
withEmail: false,
withName: false,
withOnDetailsPressedHandler: false,
);
expect(
semantics,
hasSemantics(
new TestSemantics(
children: <TestSemantics>[
new TestSemantics(
label: 'Signed in\nA',
textDirection: TextDirection.ltr,
children: <TestSemantics>[
new TestSemantics(
label: r'B',
textDirection: TextDirection.ltr,
),
new TestSemantics(
label: r'C',
textDirection: TextDirection.ltr,
),
new TestSemantics(
label: r'D',
textDirection: TextDirection.ltr,
),
],
),
],
),
ignoreId: true, ignoreTransform: true, ignoreRect: true,
),
);
semantics.dispose();
});
} }
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