[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

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
         );

examples/material_gallery/lib/demo/leave_behind_demo.dart

@@ -99,13 +99,13 @@ class LeaveBehindDemoState extends State<LeaveBehindDemo> {
       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<LeaveBehindDemo> {
           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
         )
       )

examples/material_gallery/lib/demo/list_demo.dart

@@ -49,8 +49,8 @@ class ListDemoState extends State<ListDemo> {
           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 @@ class ListDemoState extends State<ListDemo> {
             ),
             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 @@ class ListDemoState extends State<ListDemo> {
             ),
             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 @@ class ListDemoState extends State<ListDemo> {
             ),
             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<ListDemo> {
             ),
             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<ListDemo> {
             ),
             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<ListDemo> {
             ),
             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<ListDemo> {
     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
     );
   }
 

examples/material_gallery/lib/demo/menu_demo.dart

@@ -85,8 +85,8 @@ class MenuDemoState extends State<MenuDemo> {
           // 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 @@ class MenuDemoState extends State<MenuDemo> {
           // 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 @@ class MenuDemoState extends State<MenuDemo> {
             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 @@ class MenuDemoState extends State<MenuDemo> {
           // 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>(

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: <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'))
           ]
         )
       )

examples/material_gallery/lib/gallery/section.dart

@@ -49,7 +49,7 @@ class GallerySection extends StatelessWidget {
                 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); }
                   );
                 })

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<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 @@ 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,

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<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 @@ 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
         )
       ));
     }

packages/flutter/lib/src/material/popup_menu.dart

@@ -150,11 +150,11 @@ class _CheckedPopupMenuItemState<T> extends _PopupMenuItemState<CheckedPopupMenu
   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
     );
   }
 }

packages/flutter/lib/src/material/two_level_list.dart

@@ -17,18 +17,18 @@ const Duration _kExpand = const Duration(milliseconds: 200);
 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 @@ class TwoLevelListItem extends StatelessWidget {
     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 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
         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,

packages/flutter/test/widget/two_level_list_test.dart

@@ -19,16 +19,16 @@ void main() {
           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)
               ]
             )
           )