Added a Card demo.
diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml index 37137e1..1b0ab27 100644 --- a/examples/material_gallery/flutter.yaml +++ b/examples/material_gallery/flutter.yaml
@@ -18,6 +18,8 @@ - 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
diff --git a/examples/material_gallery/lib/demo/cards_demo.dart b/examples/material_gallery/lib/demo/cards_demo.dart new file mode 100644 index 0000000..3f74e93 --- /dev/null +++ b/examples/material_gallery/lib/demo/cards_demo.dart
@@ -0,0 +1,135 @@ +// 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() + ) + ); + } +}
diff --git a/examples/material_gallery/lib/gallery/home.dart b/examples/material_gallery/lib/gallery/home.dart index 381eaa2..059df91 100644 --- a/examples/material_gallery/lib/gallery/home.dart +++ b/examples/material_gallery/lib/gallery/home.dart
@@ -10,6 +10,7 @@ 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 @@ 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()),
diff --git a/examples/material_gallery/pubspec.yaml b/examples/material_gallery/pubspec.yaml index daa0bc7..d0621de 100644 --- a/examples/material_gallery/pubspec.yaml +++ b/examples/material_gallery/pubspec.yaml
@@ -6,4 +6,4 @@ path: ../../packages/flutter flutter_sprites: path: ../../packages/flutter_sprites - flutter_gallery_assets: '0.0.3' + flutter_gallery_assets: '0.0.6'