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
This commit is contained in:
Todd Volkert 2017-12-22 01:26:15 -05:00 committed by GitHub
parent 36bd9ee0d4
commit 7132083b24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 220 deletions

View File

@ -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 {
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 {
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 {
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,
); );
final List<Widget> rowChildren = <Widget>[];
if (accountEmailLine != null || accountNameLine != null) {
rowChildren.add(
new Expanded(
flex: 1,
child: new Padding(
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 0.0, 8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: (accountEmailLine != null && accountNameLine != null)
? <Widget>[accountNameLine, accountEmailLine]
: <Widget>[accountNameLine ?? accountEmailLine],
),
),
),
);
}
const double kAccountDetailsHeight = 56.0;
if (onTap != null) { if (onTap != null) {
rowChildren.add( if (accountEmailLine != null)
new InkWell( accountEmailLine = addDropdownIcon(accountEmailLine);
onTap: onTap, else
child: new Semantics( accountNameLine = addDropdownIcon(accountNameLine);
button: true, }
child: new SizedBox(
height: kAccountDetailsHeight, Widget accountDetails;
width: kAccountDetailsHeight, // make it a square if (accountEmailLine != null || accountNameLine != null) {
child: new Center( accountDetails = new Padding(
child: new Icon( padding: const EdgeInsets.symmetric(vertical: 8.0),
isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down, child: new Column(
color: Colors.white, crossAxisAlignment: CrossAxisAlignment.start,
semanticLabel: isOpen mainAxisAlignment: MainAxisAlignment.spaceEvenly,
? localizations.hideAccountsLabel children: (accountEmailLine != null && accountNameLine != null)
: localizations.showAccountsLabel, ? <Widget>[accountNameLine, accountEmailLine]
), : <Widget>[accountNameLine ?? accountEmailLine]
),
),
),
), ),
); );
} }
if (onTap != null)
accountDetails = new InkWell(onTap: onTap, child: accountDetails);
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 {
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> {
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,
),
],
),
), ),
), ),
); );

View File

@ -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'; void main() {
testWidgets('UserAccountsDrawerHeader test', (WidgetTester tester) async {
final Key avatarA = const Key('A');
final Key avatarC = const Key('C');
final Key avatarD = const Key('D');
const Key avatarA = const Key('A'); await tester.pumpWidget(
const Key avatarC = const Key('C'); new MaterialApp(
const Key avatarD = const Key('D'); home: new MediaQuery(
data: const MediaQueryData(
Future<Null> pumpTestWidget(WidgetTester tester, { padding: const EdgeInsets.only(
bool withName: true, left: 10.0,
bool withEmail: true, top: 20.0,
bool withOnDetailsPressedHandler: true, right: 30.0,
}) async { bottom: 40.0,
await tester.pumpWidget( ),
new MaterialApp(
home: new MediaQuery(
data: const MediaQueryData(
padding: const EdgeInsets.only(
left: 10.0,
top: 20.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'),
),
new CircleAvatar(
key: avatarC,
child: const Text('C'),
),
new CircleAvatar(
key: avatarD,
child: const Text('D'),
),
const CircleAvatar(
child: const Text('E'),
)
],
accountName: const Text('name'),
accountEmail: const Text('email'),
), ),
otherAccountsPictures: <Widget>[
const CircleAvatar(
child: const Text('B'),
),
const CircleAvatar(
key: avatarC,
child: const Text('C'),
),
const CircleAvatar(
key: avatarD,
child: const Text('D'),
),
const CircleAvatar(
child: const Text('E'),
)
],
accountName: withName ? const Text('name') : null,
accountEmail: withEmail ? const Text('email') : null,
), ),
), ),
), ),
), ),
), );
);
}
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() {
)); ));
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() {
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() {
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();
});
} }