Merge pull request #1787 from HansMuller/cards_demo

Added a Card demo

examples/material_gallery/flutter.yaml

@@ -18,6 +18,8 @@ assets:
   - packages/flutter_gallery_assets/icon-sun.png
   - packages/flutter_gallery_assets/icon-rain.png
   - packages/flutter_gallery_assets/icon-snow.png
+  - packages/flutter_gallery_assets/kangaroo_valley_safari.png
+  - packages/flutter_gallery_assets/top_10_australian_beaches.png
 material-design-icons:
   - name: action/account_circle
   - name: action/alarm

examples/material_gallery/lib/demo/cards_demo.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/material.dart';
+import 'package:flutter/widgets.dart';
+
+class TravelDestination {
+  const TravelDestination({ this.assetName, this.title, this.description });
+
+  final String assetName;
+  final String title;
+  final List<String> description;
+
+  bool get isValid => assetName != null && title != null && description?.length == 3;
+}
+
+final List<TravelDestination> destinations = <TravelDestination>[
+  const TravelDestination(
+    assetName: 'packages/flutter_gallery_assets/top_10_australian_beaches.png',
+    title: 'Top 10 Australian beaches',
+    description: const <String>[
+      'Number 10',
+      'Whitehaven Beach',
+      'Whitsunday Island, Whitsunday Islands'
+    ]
+  ),
+  const TravelDestination(
+    assetName: 'packages/flutter_gallery_assets/kangaroo_valley_safari.png',
+    title: 'Kangaroo Valley Safari',
+    description: const <String>[
+      '2031 Moss Vale Road',
+      'Kangaroo Valley 2577',
+      'New South Wales'
+    ]
+  )
+];
+
+class TravelDestinationItem extends StatelessComponent {
+  TravelDestinationItem({ Key key, this.destination }) : super(key: key) {
+    assert(destination != null && destination.isValid);
+  }
+
+  final TravelDestination destination;
+
+  Widget build(BuildContext context) {
+    ThemeData theme = Theme.of(context);
+    TextStyle titleStyle = theme.text.headline.copyWith(color: Colors.white);
+    TextStyle descriptionStyle = theme.text.subhead;
+    TextStyle buttonStyle = theme.text.button.copyWith(color: theme.primaryColor);
+
+    return new Card(
+      child: new SizedBox(
+        height: 328.0,
+        child: new Column(
+          children: <Widget>[
+            // photo and title
+            new SizedBox(
+              height: 184.0,
+              child: new Stack(
+                children: <Widget>[
+                  new Positioned(
+                    left: 0.0,
+                    top: 0.0,
+                    bottom: 0.0,
+                    right: 0.0,
+                    child: new AssetImage(
+                      name: destination.assetName,
+                      fit: ImageFit.cover
+                    )
+                  ),
+                  new Positioned(
+                    bottom: 16.0,
+                    left: 16.0,
+                    child: new Text(destination.title, style: titleStyle)
+                  )
+                ]
+              )
+            ),
+            // description and share/expore buttons
+            new Flexible(
+              child: new Padding(
+                padding: const EdgeDims.all(16.0),
+                child: new Column(
+                  justifyContent: FlexJustifyContent.start,
+                  alignItems: FlexAlignItems.start,
+                  children: <Widget>[
+                    // three line description
+                    new Text(destination.description[0], style: descriptionStyle),
+                    new Text(destination.description[1], style: descriptionStyle),
+                    new Text(destination.description[2], style: descriptionStyle),
+                    // share, explore buttons
+                    new Flexible(
+                      child: new Row(
+                        justifyContent: FlexJustifyContent.start,
+                        alignItems: FlexAlignItems.end,
+                        children: <Widget>[
+                          new Padding(
+                            padding: const EdgeDims.only(right: 16.0),
+                            child: new Text('SHARE', style: buttonStyle)
+                          ),
+                          new Text('EXPLORE', style: buttonStyle)
+                        ]
+                      )
+                    )
+                  ]
+                )
+              )
+            )
+          ]
+        )
+      )
+    );
+  }
+}
+
+class CardsDemo extends StatelessComponent {
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      toolBar: new ToolBar(
+        center: new Text("Travel Stream")
+      ),
+      body: new Block(
+        padding: const EdgeDims.only(top: 8.0, left: 8.0, right: 8.0),
+        children: destinations.map((TravelDestination destination) {
+          return new Container(
+            margin: const EdgeDims.only(bottom: 8.0),
+            child: new TravelDestinationItem(destination: destination)
+          );
+        })
+        .toList()
+      )
+    );
+  }
+}

examples/material_gallery/lib/gallery/home.dart

@@ -10,6 +10,7 @@ import 'drawer.dart';
 import 'section.dart';
 
 import '../demo/buttons_demo.dart';
+import '../demo/cards_demo.dart';
 import '../demo/chip_demo.dart';
 import '../demo/date_picker_demo.dart';
 import '../demo/dialog_demo.dart';
@@ -85,6 +86,7 @@ class GalleryHomeState extends State<GalleryHome> {
                   colors: Colors.amber,
                   demos: <GalleryDemo>[
                     new GalleryDemo(title: 'Buttons', builder: () => new ButtonsDemo()),
+                    new GalleryDemo(title: 'Cards', builder: () => new CardsDemo()),
                     new GalleryDemo(title: 'Chips', builder: () => new ChipDemo()),
                     new GalleryDemo(title: 'Date Picker', builder: () => new DatePickerDemo()),
                     new GalleryDemo(title: 'Dialog', builder: () => new DialogDemo()),

examples/material_gallery/pubspec.yaml

@@ -6,4 +6,4 @@ dependencies:
     path: ../../packages/flutter
   flutter_sprites:
     path: ../../packages/flutter_sprites
-  flutter_gallery_assets: '0.0.3'
+  flutter_gallery_assets: '0.0.6'