GridTileBar uses ellipsis, etc (#3881)

examples/flutter_gallery/lib/demo/grid_list_demo.dart

@@ -31,23 +31,23 @@ class Photo {
 
 const String photoHeroTag = 'Photo';
 
-typedef void PhotoFavoriteCallback(Photo photo);
+typedef void BannerTapCallback(Photo photo);
 
 class GridDemoPhotoItem extends StatelessWidget {
   GridDemoPhotoItem({
     Key key,
     this.photo,
     this.tileStyle,
-    this.onPressedFavorite
+    this.onBannerTap
   }) : super(key: key) {
     assert(photo != null && photo.isValid);
     assert(tileStyle != null);
-    assert(onPressedFavorite != null);
+    assert(onBannerTap != null);
   }
 
   final Photo photo;
   final GridDemoTileStyle tileStyle;
-  final PhotoFavoriteCallback onPressedFavorite;
+  final BannerTapCallback onBannerTap; // User taps on the photo's header or footer.
 
   void showPhoto(BuildContext context) {
     Key photoKey = new Key(photo.assetName);
@@ -99,28 +99,32 @@ class GridDemoPhotoItem extends StatelessWidget {
 
       case GridDemoTileStyle.oneLine:
         return new GridTile(
-          header: new GridTileBar(
+          header: new GestureDetector(
+            onTap: () { onBannerTap(photo); },
+            child: new GridTileBar(
+              title: new Text(photo.title),
               backgroundColor: Colors.black45,
-            leading: new IconButton(
+              leading: new Icon(
                 icon: icon,
-              color: Colors.white,
+                color: Colors.white
-              onPressed: () { onPressedFavorite(photo); }
+              )
-            ),
+            )
-            title: new Text(photo.title)
           ),
           child: image
         );
 
       case GridDemoTileStyle.twoLine:
         return new GridTile(
-          footer: new GridTileBar(
+          footer: new GestureDetector(
+            onTap: () { onBannerTap(photo); },
+            child: new GridTileBar(
               backgroundColor: Colors.black45,
               title: new Text(photo.title),
               subtitle: new Text(photo.caption),
-            trailing: new IconButton(
+              trailing: new Icon(
                 icon: icon,
-              color: Colors.white,
+                color: Colors.white
-              onPressed: () { onPressedFavorite(photo); }
+              )
             )
           ),
           child: image
@@ -204,32 +208,10 @@ class GridListDemoState extends State<GridListDemo> {
     ),
   ];
 
-  void showTileStyleMenu(BuildContext context) {
+  void changeTileStyle(GridDemoTileStyle value) {
-    final List<PopupMenuItem<GridDemoTileStyle>> items = <PopupMenuItem<GridDemoTileStyle>>[
-      new PopupMenuItem<GridDemoTileStyle>(
-        value: GridDemoTileStyle.imageOnly,
-        child: new Text('Image only')
-      ),
-      new PopupMenuItem<GridDemoTileStyle>(
-        value: GridDemoTileStyle.oneLine,
-        child: new Text('One line')
-      ),
-      new PopupMenuItem<GridDemoTileStyle>(
-        value: GridDemoTileStyle.twoLine,
-        child: new Text('Two line')
-      )
-    ];
-
-    final EdgeInsets padding = MediaQuery.of(context).padding;
-    final RelativeRect position = new RelativeRect.fromLTRB(
-      0.0, padding.top + 16.0, padding.right + 16.0, 0.0
-    );
-
-    showMenu(context: context, position: position, items: items).then((GridDemoTileStyle value) {
     setState(() {
       tileStyle = value;
     });
-    });
   }
 
   // When the ScrollableGrid first appears we want the last row to only be
@@ -242,10 +224,22 @@ class GridListDemoState extends State<GridListDemo> {
       appBar: new AppBar(
         title: new Text('Grid list'),
         actions: <Widget>[
-          new IconButton(
+          new PopupMenuButton<GridDemoTileStyle>(
-            icon: Icons.more_vert,
+            onSelected: changeTileStyle,
-            onPressed: () { showTileStyleMenu(context); },
+            itemBuilder: (BuildContext context) => <PopupMenuItem<GridDemoTileStyle>>[
-            tooltip: 'Show menu'
+              new PopupMenuItem<GridDemoTileStyle>(
+                value: GridDemoTileStyle.imageOnly,
+                child: new Text('Image only')
+              ),
+              new PopupMenuItem<GridDemoTileStyle>(
+                value: GridDemoTileStyle.oneLine,
+                child: new Text('One line')
+              ),
+              new PopupMenuItem<GridDemoTileStyle>(
+                value: GridDemoTileStyle.twoLine,
+                child: new Text('Two line')
+              )
+            ]
           )
         ]
       ),
@@ -264,7 +258,7 @@ class GridListDemoState extends State<GridListDemo> {
                 return new GridDemoPhotoItem(
                   photo: photo,
                   tileStyle: tileStyle,
-                  onPressedFavorite: (Photo photo) {
+                  onBannerTap: (Photo photo) {
                     setState(() {
                       photo.isFavorite = !photo.isFavorite;
                     });

examples/flutter_gallery/lib/demo/icons_demo.dart

@@ -50,7 +50,7 @@ class IconsDemoState extends State<IconsDemo> {
       size: size,
       icon: icon,
       color: iconColor,
-      tooltip: "${enabled ? 'enabled' : 'disabled'} icon button",
+      tooltip: "${enabled ? 'Enabled' : 'Disabled'} icon button",
       onPressed: enabled ? handleIconButtonPress : null
     );
   }

examples/flutter_gallery/lib/demo/tooltip_demo.dart

@@ -44,7 +44,7 @@ class TooltipDemo extends StatelessWidget {
                   size: 48.0,
                   icon: Icons.call,
                   color: theme.primaryColor,
-                  tooltip: 'place a phone call',
+                  tooltip: 'Place a phone call',
                   onPressed: () {
                     Scaffold.of(context).showSnackBar(new SnackBar(
                        content: new Text('That was an ordinary tap.')

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

@@ -85,10 +85,14 @@ class GridTileBar extends StatelessWidget {
             children: <Widget>[
               new DefaultTextStyle(
                 style: Typography.white.subhead,
+                softWrap: false,
+                overflow: TextOverflow.ellipsis,
                 child: title
               ),
               new DefaultTextStyle(
                 style: Typography.white.caption,
+                softWrap: false,
+                overflow: TextOverflow.ellipsis,
                 child: subtitle
               )
             ]
@@ -100,6 +104,8 @@ class GridTileBar extends StatelessWidget {
         new Flexible(
           child: new DefaultTextStyle(
             style: Typography.white.subhead,
+            softWrap: false,
+            overflow: TextOverflow.ellipsis,
             child: title ?? subtitle
           )
         )