Merge pull request #2012 from HansMuller/grid_tile

Added GridTile

Simplify creating grid tiles with GridTileBar headers or footers.

examples/material_gallery/lib/demo/grid_list_demo.dart

@@ -69,52 +69,26 @@ class GridDemoPhotoItem extends StatelessComponent {
         return image;
 
       case GridDemoTileStyle.oneLine:
-        return new Stack(
-          children: <Widget>[
-            new Positioned(
-              top: 0.0,
-              left: 0.0,
-              bottom: 0.0,
-              right: 0.0,
-              child: image
-            ),
-            new Positioned(
-              top: 0.0,
-              left: 0.0,
-              right: 0.0,
-              child: new GridTileBar(
-                backgroundColor: Colors.black.withAlpha(0x08),
-                title: new Text(photo.title),
-                left: new Icon(icon: 'action/info', color: Colors.white70)
-              )
-            )
-          ]
+        return new GridTile(
+          header: new GridTileBar(
+            backgroundColor: Colors.black.withAlpha(0x08),
+            left: new Icon(icon: 'action/info', color: Colors.white70),
+            title: new Text(photo.title)
+          ),
+          child: image
         );
 
       case GridDemoTileStyle.twoLine:
-        return new Stack(
-          children: <Widget>[
-            new Positioned(
-              top: 0.0,
-              left: 0.0,
-              bottom: 0.0,
-              right: 0.0,
-              child: image
-            ),
-            new Positioned(
-              left: 0.0,
-              bottom: 0.0,
-              right: 0.0,
-              child: new GridTileBar(
-                backgroundColor: Colors.black.withAlpha(0x08),
-                title: new Text(photo.title),
-                caption: new Text(photo.caption),
-                right: new Icon(icon: 'action/info', color: Colors.white70)
-              )
-            )
-          ]
+        return new GridTile(
+          footer: new GridTileBar(
+            backgroundColor: Colors.black.withAlpha(0x08),
+            title: new Text(photo.title),
+            caption: new Text(photo.caption),
+            right: new Icon(icon: 'action/info', color: Colors.white70)
+          ),
+          child: image
         );
-      }
+    }
   }
 }
 

packages/flutter/lib/material.dart

@@ -25,6 +25,7 @@ export 'src/material/dropdown.dart';
 export 'src/material/flat_button.dart';
 export 'src/material/flexible_space_bar.dart';
 export 'src/material/floating_action_button.dart';
+export 'src/material/grid_tile.dart';
 export 'src/material/grid_tile_bar.dart';
 export 'src/material/icon.dart';
 export 'src/material/icon_button.dart';

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

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/widgets.dart';
+
+/// Creates a [Stack] with the header anchored across the top or a footer across the
+/// bottom. The [GridTileBar] class can be used to create grid tile headers and footers.
+class GridTile extends StatelessComponent {
+  GridTile({ Key key, this.header, this.footer, this.child }) : super(key: key) {
+    assert(child != null);
+  }
+
+  final Widget header;
+  final Widget footer;
+  final Widget child;
+
+  Widget build(BuildContext context) {
+    if (header == null && footer == null)
+      return child;
+
+    final List<Widget> children = <Widget>[
+      new Positioned(
+        top: 0.0,
+        left: 0.0,
+        bottom: 0.0,
+        right: 0.0,
+        child: child
+      )
+    ];
+    if (header != null) {
+      children.add(new Positioned(
+        top: 0.0,
+        left: 0.0,
+        right: 0.0,
+        child: header
+      ));
+    }
+    if (footer != null) {
+      children.add(new Positioned(
+        left: 0.0,
+        bottom: 0.0,
+        right: 0.0,
+        child: footer
+      ));
+    }
+    return new Stack(children: children);
+  }
+}