diff --git a/examples/material_gallery/lib/demo/grid_list_demo.dart b/examples/material_gallery/lib/demo/grid_list_demo.dart index ff1b6e4784..834735bf4d 100644 --- a/examples/material_gallery/lib/demo/grid_list_demo.dart +++ b/examples/material_gallery/lib/demo/grid_list_demo.dart @@ -72,7 +72,7 @@ class GridDemoPhotoItem extends StatelessWidget { return new GridTile( header: new GridTileBar( backgroundColor: Colors.black.withAlpha(0x08), - left: new Icon(icon: Icons.info, color: Colors.white70), + leading: new Icon(icon: Icons.info, color: Colors.white70), title: new Text(photo.title) ), child: image @@ -83,8 +83,8 @@ class GridDemoPhotoItem extends StatelessWidget { footer: new GridTileBar( backgroundColor: Colors.black.withAlpha(0x08), title: new Text(photo.title), - caption: new Text(photo.caption), - right: new Icon(icon: Icons.info, color: Colors.white70) + subtitle: new Text(photo.caption), + trailing: new Icon(icon: Icons.info, color: Colors.white70) ), child: image ); diff --git a/examples/material_gallery/lib/demo/leave_behind_demo.dart b/examples/material_gallery/lib/demo/leave_behind_demo.dart index a8b4554706..30e695af34 100644 --- a/examples/material_gallery/lib/demo/leave_behind_demo.dart +++ b/examples/material_gallery/lib/demo/leave_behind_demo.dart @@ -99,13 +99,13 @@ class LeaveBehindDemoState extends State { background: new Container( decoration: new BoxDecoration(backgroundColor: theme.primaryColor), child: new ListItem( - left: new Icon(icon: Icons.delete, color: Colors.white, size: 36.0) + leading: new Icon(icon: Icons.delete, color: Colors.white, size: 36.0) ) ), secondaryBackground: new Container( decoration: new BoxDecoration(backgroundColor: theme.primaryColor), child: new ListItem( - right: new Icon(icon: Icons.archive, color: Colors.white, size: 36.0) + trailing: new Icon(icon: Icons.archive, color: Colors.white, size: 36.0) ) ), child: new Container( @@ -114,8 +114,8 @@ class LeaveBehindDemoState extends State { border: new Border(bottom: new BorderSide(color: theme.dividerColor)) ), child: new ListItem( - primary: new Text(item.name), - secondary: new Text('${item.subject}\n${item.body}'), + title: new Text(item.name), + subtitle: new Text('${item.subject}\n${item.body}'), isThreeLine: true ) ) diff --git a/examples/material_gallery/lib/demo/list_demo.dart b/examples/material_gallery/lib/demo/list_demo.dart index 429ba402ca..71391082c1 100644 --- a/examples/material_gallery/lib/demo/list_demo.dart +++ b/examples/material_gallery/lib/demo/list_demo.dart @@ -49,8 +49,8 @@ class ListDemoState extends State { children: [ new ListItem( dense: true, - primary: new Text('One-line'), - right: new Radio( + title: new Text('One-line'), + trailing: new Radio( value: ListDemoItemSize.oneLine, groupValue: _itemSize, onChanged: changeItemSize @@ -58,8 +58,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Two-line'), - right: new Radio( + title: new Text('Two-line'), + trailing: new Radio( value: ListDemoItemSize.twoLine, groupValue: _itemSize, onChanged: changeItemSize @@ -67,8 +67,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Three-line'), - right: new Radio( + title: new Text('Three-line'), + trailing: new Radio( value: ListDemoItemSize.threeLine, groupValue: _itemSize, onChanged: changeItemSize @@ -76,8 +76,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Show Avatar'), - right: new Checkbox( + title: new Text('Show Avatar'), + trailing: new Checkbox( value: _showAvatars, onChanged: (bool value) { setState(() { @@ -89,8 +89,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Show Icon'), - right: new Checkbox( + title: new Text('Show Icon'), + trailing: new Checkbox( value: _showIcons, onChanged: (bool value) { setState(() { @@ -102,8 +102,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Show Dividers'), - right: new Checkbox( + title: new Text('Show Dividers'), + trailing: new Checkbox( value: _showDividers, onChanged: (bool value) { setState(() { @@ -115,8 +115,8 @@ class ListDemoState extends State { ), new ListItem( dense: true, - primary: new Text('Dense Layout'), - right: new Checkbox( + title: new Text('Dense Layout'), + trailing: new Checkbox( value: _dense, onChanged: (bool value) { setState(() { @@ -146,10 +146,10 @@ class ListDemoState extends State { return new ListItem( isThreeLine: _itemSize == ListDemoItemSize.threeLine, dense: _dense, - left: _showAvatars ? new CircleAvatar(child: new Text(item)) : null, - primary: new Text('This item represents $item'), - secondary: secondary, - right: _showIcons ? new Icon(icon: Icons.info, color: Theme.of(context).disabledColor) : null + leading: _showAvatars ? new CircleAvatar(child: new Text(item)) : null, + title: new Text('This item represents $item'), + subtitle: secondary, + trailing: _showIcons ? new Icon(icon: Icons.info, color: Theme.of(context).disabledColor) : null ); } diff --git a/examples/material_gallery/lib/demo/menu_demo.dart b/examples/material_gallery/lib/demo/menu_demo.dart index d627fb340a..c3eac68976 100644 --- a/examples/material_gallery/lib/demo/menu_demo.dart +++ b/examples/material_gallery/lib/demo/menu_demo.dart @@ -85,8 +85,8 @@ class MenuDemoState extends State { // a simple menu with one disabled item. Typically the contents // of this "contextual menu" would reflect the app's state. new ListItem( - primary: new Text('An item with a context menu button'), - right: new PopupMenuButton( + title: new Text('An item with a context menu button'), + trailing: new PopupMenuButton( onSelected: showMenuSelection, items: >[ new PopupMenuItem( @@ -108,37 +108,37 @@ class MenuDemoState extends State { // a menu whose items have text labels and icons and a divider // That separates the first three items from the last one. new ListItem( - primary: new Text('An item with a sectioned menu'), - right: new PopupMenuButton( + title: new Text('An item with a sectioned menu'), + trailing: new PopupMenuButton( onSelected: showMenuSelection, items: >[ new PopupMenuItem( value: 'Preview', child: new ListItem( - left: new Icon(icon: Icons.visibility), - primary: new Text('Preview') + leading: new Icon(icon: Icons.visibility), + title: new Text('Preview') ) ), new PopupMenuItem( value: 'Share', child: new ListItem( - left: new Icon(icon: Icons.person_add), - primary: new Text('Share') + leading: new Icon(icon: Icons.person_add), + title: new Text('Share') ) ), new PopupMenuItem( value: 'Get Link', child: new ListItem( - left: new Icon(icon: Icons.link), - primary: new Text('Get Link') + leading: new Icon(icon: Icons.link), + title: new Text('Get Link') ) ), new PopupMenuDivider(), new PopupMenuItem( value: 'Remove', child: new ListItem( - left: new Icon(icon: Icons.delete), - primary: new Text('Remove') + leading: new Icon(icon: Icons.delete), + title: new Text('Remove') ) ) ] @@ -151,8 +151,8 @@ class MenuDemoState extends State { initialValue: _simpleValue, onSelected: showMenuSelection, child: new ListItem( - primary: new Text('An item with a simple menu'), - secondary: new Text(_simpleValue) + title: new Text('An item with a simple menu'), + subtitle: new Text(_simpleValue) ), items: >[ new PopupMenuItem( @@ -172,8 +172,8 @@ class MenuDemoState extends State { // Pressing the PopupMenuButton on the right of this item shows a menu // whose items have checked icons that reflect this app's state. new ListItem( - primary: new Text('An item with a checklist menu'), - right: new PopupMenuButton( + title: new Text('An item with a checklist menu'), + trailing: new PopupMenuButton( onSelected: showCheckedMenuSelections, items: >[ new CheckedPopupMenuItem( diff --git a/examples/material_gallery/lib/demo/two_level_list_demo.dart b/examples/material_gallery/lib/demo/two_level_list_demo.dart index 506b7e5a37..a9105ff824 100644 --- a/examples/material_gallery/lib/demo/two_level_list_demo.dart +++ b/examples/material_gallery/lib/demo/two_level_list_demo.dart @@ -13,17 +13,17 @@ class TwoLevelListDemo extends StatelessWidget { child: new TwoLevelList( type: MaterialListType.oneLine, items: [ - new TwoLevelListItem(center: new Text('Top')), + new TwoLevelListItem(title: new Text('Top')), new TwoLevelSublist( center: new Text('Sublist'), children: [ - new TwoLevelListItem(center: new Text('One')), - new TwoLevelListItem(center: new Text('Two')), - new TwoLevelListItem(center: new Text('Free')), - new TwoLevelListItem(center: new Text('Four')) + new TwoLevelListItem(title: new Text('One')), + new TwoLevelListItem(title: new Text('Two')), + new TwoLevelListItem(title: new Text('Free')), + new TwoLevelListItem(title: new Text('Four')) ] ), - new TwoLevelListItem(center: new Text('Bottom')) + new TwoLevelListItem(title: new Text('Bottom')) ] ) ) diff --git a/examples/material_gallery/lib/gallery/section.dart b/examples/material_gallery/lib/gallery/section.dart index 82e8463209..83e88d71f4 100644 --- a/examples/material_gallery/lib/gallery/section.dart +++ b/examples/material_gallery/lib/gallery/section.dart @@ -49,7 +49,7 @@ class GallerySection extends StatelessWidget { type: MaterialListType.oneLine, children: (demos ?? const []).map((GalleryDemo demo) { return new ListItem( - primary: new Text(demo.title), + title: new Text(demo.title), onTap: () { showDemo(demo, context, theme); } ); }) diff --git a/packages/flutter/lib/src/material/grid_tile_bar.dart b/packages/flutter/lib/src/material/grid_tile_bar.dart index 48f92107c1..53ff195978 100644 --- a/packages/flutter/lib/src/material/grid_tile_bar.dart +++ b/packages/flutter/lib/src/material/grid_tile_bar.dart @@ -13,16 +13,23 @@ import 'typography.dart'; /// Typically used to stack a one or two line header or footer on a Grid tile. /// The layout is based on the "Grid Lists" section of the Material Design spec: /// https://www.google.com/design/spec/components/grid-lists.html#grid-lists-specs -/// For a one-line header specify title and to add a second line specify caption. -/// Use left or right to add an icon. +/// For a one-line header specify [title] and to add a second line specify [subtitle]. +/// Use [leading] or [trailing] to add an icon. class GridTileBar extends StatelessWidget { - GridTileBar({ Key key, this.backgroundColor, this.left, this.right, this.title, this.caption }) : super(key: key); + GridTileBar({ + Key key, + this.backgroundColor, + this.leading, + this.title, + this.subtitle, + this.trailing + }) : super(key: key); final Color backgroundColor; - final Widget left; - final Widget right; + final Widget leading; final Widget title; - final Widget caption; + final Widget subtitle; + final Widget trailing; Widget build(BuildContext context) { BoxDecoration decoration; @@ -30,19 +37,19 @@ class GridTileBar extends StatelessWidget { decoration = new BoxDecoration(backgroundColor: backgroundColor); EdgeInsets padding; - if (left != null && right != null) + if (leading != null && trailing != null) padding = const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0); - else if (left != null) + else if (leading != null) padding = const EdgeInsets.only(left: 8.0, right: 16.0, top: 16.0, bottom: 16.0); - else // right != null || (left == null && right == null) + else // trailing != null || (leading == null && trailing == null) padding = const EdgeInsets.only(left: 16.0, right: 8.0, top: 16.0, bottom: 16.0); final List children = []; - if (left != null) - children.add(new Padding(padding: const EdgeInsets.only(right: 8.0), child: left)); + if (leading != null) + children.add(new Padding(padding: const EdgeInsets.only(right: 8.0), child: leading)); - if (title != null && caption != null) { + if (title != null && subtitle != null) { children.add( new Flexible( child: new Column( @@ -54,25 +61,25 @@ class GridTileBar extends StatelessWidget { ), new DefaultTextStyle( style: Typography.white.caption, - child: caption + child: subtitle ) ] ) ) ); - } else if (title != null || caption != null) { + } else if (title != null || subtitle != null) { children.add( new Flexible( child: new DefaultTextStyle( style: Typography.white.subhead, - child: title ?? caption + child: title ?? subtitle ) ) ); } - if (right != null) - children.add(new Padding(padding: const EdgeInsets.only(left: 8.0), child: right)); + if (trailing != null) + children.add(new Padding(padding: const EdgeInsets.only(left: 8.0), child: trailing)); return new Container( padding: padding, diff --git a/packages/flutter/lib/src/material/list_item.dart b/packages/flutter/lib/src/material/list_item.dart index 09df91f3ac..68a6fe52c4 100644 --- a/packages/flutter/lib/src/material/list_item.dart +++ b/packages/flutter/lib/src/material/list_item.dart @@ -9,32 +9,32 @@ import 'ink_well.dart'; import 'theme.dart'; /// Material List items are one to three lines of text optionally flanked by icons. -/// Icons are defined with the [left] and [right] parameters. The first line of text -/// is not optional and is specified with [primary]. The value of [secondary] will +/// Icons are defined with the [leading] and [trailing] parameters. The first line of text +/// is not optional and is specified with [title]. The value of [subtitle] will /// occupy the space allocated for an aditional line of text, or two lines if /// isThreeLine: true is specified. If dense: true is specified then the overall /// height of this list item and the size of the DefaultTextStyles that wrap -/// the [primary] and [secondary] widget are reduced. +/// the [title] and [subtitle] widget are reduced. class ListItem extends StatelessWidget { ListItem({ Key key, - this.left, - this.primary, - this.secondary, - this.right, + this.leading, + this.title, + this.subtitle, + this.trailing, this.isThreeLine: false, this.dense: false, this.enabled: true, this.onTap, this.onLongPress }) : super(key: key) { - assert(isThreeLine ? secondary != null : true); + assert(isThreeLine ? subtitle != null : true); } - final Widget left; - final Widget primary; - final Widget secondary; - final Widget right; + final Widget leading; + final Widget title; + final Widget subtitle; + final Widget trailing; final bool isThreeLine; final bool dense; final bool enabled; @@ -86,7 +86,7 @@ class ListItem extends StatelessWidget { Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); - final bool isTwoLine = !isThreeLine && secondary != null; + final bool isTwoLine = !isThreeLine && subtitle != null; final bool isOneLine = !isThreeLine && !isTwoLine; double itemHeight; if (isOneLine) @@ -103,20 +103,20 @@ class ListItem extends StatelessWidget { // Overall, the list item is a Row() with these children. final List children = []; - if (left != null) { + if (leading != null) { children.add(new Container( margin: new EdgeInsets.only(right: 16.0, top: iconMarginTop), width: 40.0, child: new Align( alignment: new FractionalOffset(0.0, isThreeLine ? 0.0 : 0.5), - child: left + child: leading ) )); } final Widget primaryLine = new DefaultTextStyle( style: primaryTextStyle(context), - child: primary ?? new Container() + child: title ?? new Container() ); Widget center = primaryLine; if (isTwoLine || isThreeLine) { @@ -127,7 +127,7 @@ class ListItem extends StatelessWidget { primaryLine, new DefaultTextStyle( style: secondaryTextStyle(context), - child: secondary + child: subtitle ) ] ); @@ -136,12 +136,12 @@ class ListItem extends StatelessWidget { child: center )); - if (right != null) { + if (trailing != null) { children.add(new Container( margin: new EdgeInsets.only(left: 16.0, top: iconMarginTop), child: new Align( alignment: new FractionalOffset(1.0, isThreeLine ? 0.0 : 0.5), - child: right + child: trailing ) )); } diff --git a/packages/flutter/lib/src/material/popup_menu.dart b/packages/flutter/lib/src/material/popup_menu.dart index a3638547e9..de732a6b81 100644 --- a/packages/flutter/lib/src/material/popup_menu.dart +++ b/packages/flutter/lib/src/material/popup_menu.dart @@ -150,11 +150,11 @@ class _CheckedPopupMenuItemState extends _PopupMenuItemState { children: [ new TwoLevelListItem( onTap: _handleOnTap, - left: config.left, - center: new DefaultTextStyle( + leading: config.left, + title: new DefaultTextStyle( style: Theme.of(context).textTheme.subhead.copyWith(color: _headerColor.evaluate(_easeInAnimation)), child: config.center ), - right: new RotationTransition( + trailing: new RotationTransition( turns: _iconTurns, child: new Icon( icon: Icons.expand_more, diff --git a/packages/flutter/test/widget/two_level_list_test.dart b/packages/flutter/test/widget/two_level_list_test.dart index 4478290699..762521f840 100644 --- a/packages/flutter/test/widget/two_level_list_test.dart +++ b/packages/flutter/test/widget/two_level_list_test.dart @@ -19,16 +19,16 @@ void main() { child: new Viewport( child: new TwoLevelList( items: [ - new TwoLevelListItem(center: new Text('Top'), key: topKey), + new TwoLevelListItem(title: new Text('Top'), key: topKey), new TwoLevelSublist( key: sublistKey, center: new Text('Sublist'), children: [ - new TwoLevelListItem(center: new Text('0')), - new TwoLevelListItem(center: new Text('1')) + new TwoLevelListItem(title: new Text('0')), + new TwoLevelListItem(title: new Text('1')) ] ), - new TwoLevelListItem(center: new Text('Bottom'), key: bottomKey) + new TwoLevelListItem(title: new Text('Bottom'), key: bottomKey) ] ) )