[rename fixit] left -> leading, right -> trailing The terms "left" and "right" have an LTR bias. Instead, we now use "leading" and "trailing", for these list and grid decorations so that we can later rearrange them to match the reading order. Fixes #2540 Fixes #2548
diff --git a/examples/material_gallery/lib/demo/grid_list_demo.dart b/examples/material_gallery/lib/demo/grid_list_demo.dart index ff1b6e4..834735b 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 @@ 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 @@ 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 a8b4554..30e695a 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 @@ 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 @@ 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 429ba40..7139108 100644 --- a/examples/material_gallery/lib/demo/list_demo.dart +++ b/examples/material_gallery/lib/demo/list_demo.dart
@@ -49,8 +49,8 @@ children: <Widget>[ new ListItem( dense: true, - primary: new Text('One-line'), - right: new Radio<ListDemoItemSize>( + title: new Text('One-line'), + trailing: new Radio<ListDemoItemSize>( value: ListDemoItemSize.oneLine, groupValue: _itemSize, onChanged: changeItemSize @@ -58,8 +58,8 @@ ), new ListItem( dense: true, - primary: new Text('Two-line'), - right: new Radio<ListDemoItemSize>( + title: new Text('Two-line'), + trailing: new Radio<ListDemoItemSize>( value: ListDemoItemSize.twoLine, groupValue: _itemSize, onChanged: changeItemSize @@ -67,8 +67,8 @@ ), new ListItem( dense: true, - primary: new Text('Three-line'), - right: new Radio<ListDemoItemSize>( + title: new Text('Three-line'), + trailing: new Radio<ListDemoItemSize>( value: ListDemoItemSize.threeLine, groupValue: _itemSize, onChanged: changeItemSize @@ -76,8 +76,8 @@ ), 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 @@ ), 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 @@ ), 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 @@ ), 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 @@ 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 d627fb3..c3eac68 100644 --- a/examples/material_gallery/lib/demo/menu_demo.dart +++ b/examples/material_gallery/lib/demo/menu_demo.dart
@@ -85,8 +85,8 @@ // 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<String>( + title: new Text('An item with a context menu button'), + trailing: new PopupMenuButton<String>( onSelected: showMenuSelection, items: <PopupMenuItem<String>>[ new PopupMenuItem<String>( @@ -108,37 +108,37 @@ // 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<String>( + title: new Text('An item with a sectioned menu'), + trailing: new PopupMenuButton<String>( onSelected: showMenuSelection, items: <PopupMenuEntry<String>>[ new PopupMenuItem<String>( 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<String>( 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<String>( 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<String>( 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 @@ 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: <PopupMenuItem<String>>[ new PopupMenuItem<String>( @@ -172,8 +172,8 @@ // 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<String>( + title: new Text('An item with a checklist menu'), + trailing: new PopupMenuButton<String>( onSelected: showCheckedMenuSelections, items: <PopupMenuItem<String>>[ new CheckedPopupMenuItem<String>(
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 506b7e5..a9105ff 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 @@ child: new TwoLevelList( type: MaterialListType.oneLine, items: <Widget>[ - new TwoLevelListItem(center: new Text('Top')), + new TwoLevelListItem(title: new Text('Top')), new TwoLevelSublist( center: new Text('Sublist'), children: <Widget>[ - 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 82e8463..83e88d7 100644 --- a/examples/material_gallery/lib/gallery/section.dart +++ b/examples/material_gallery/lib/gallery/section.dart
@@ -49,7 +49,7 @@ type: MaterialListType.oneLine, children: (demos ?? const <GalleryDemo>[]).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 48f9210..53ff195 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 @@ /// 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 @@ 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<Widget> children = <Widget>[]; - 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 @@ ), 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 09df91f..68a6fe5 100644 --- a/packages/flutter/lib/src/material/list_item.dart +++ b/packages/flutter/lib/src/material/list_item.dart
@@ -9,32 +9,32 @@ 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 @@ 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 @@ // Overall, the list item is a Row() with these children. final List<Widget> children = <Widget>[]; - 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 @@ primaryLine, new DefaultTextStyle( style: secondaryTextStyle(context), - child: secondary + child: subtitle ) ] ); @@ -136,12 +136,12 @@ 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 a363854..de732a6 100644 --- a/packages/flutter/lib/src/material/popup_menu.dart +++ b/packages/flutter/lib/src/material/popup_menu.dart
@@ -150,11 +150,11 @@ Widget buildChild() { return new ListItem( enabled: config.enabled, - left: new FadeTransition( + leading: new FadeTransition( opacity: _opacity, child: new Icon(icon: _controller.isDismissed ? null : Icons.done) ), - primary: config.child + title: config.child ); } }
diff --git a/packages/flutter/lib/src/material/two_level_list.dart b/packages/flutter/lib/src/material/two_level_list.dart index bd1236c..b19e357 100644 --- a/packages/flutter/lib/src/material/two_level_list.dart +++ b/packages/flutter/lib/src/material/two_level_list.dart
@@ -17,18 +17,18 @@ class TwoLevelListItem extends StatelessWidget { TwoLevelListItem({ Key key, - this.left, - this.center, - this.right, + this.leading, + this.title, + this.trailing, this.onTap, this.onLongPress }) : super(key: key) { - assert(center != null); + assert(title != null); } - final Widget left; - final Widget center; - final Widget right; + final Widget leading; + final Widget title; + final Widget trailing; final GestureTapCallback onTap; final GestureLongPressCallback onLongPress; @@ -39,9 +39,9 @@ return new SizedBox( height: kListItemExtent[parentList.type], child: new ListItem( - left: left, - primary: center, - right: right, + leading: leading, + title: title, + trailing: trailing, onTap: onTap, onLongPress: onLongPress ) @@ -108,12 +108,12 @@ children: <Widget>[ 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 4478290..762521f 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 @@ child: new Viewport( child: new TwoLevelList( items: <Widget>[ - 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: <Widget>[ - 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) ] ) )