diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml index 37137e15446..1b0ab27013a 100644 --- a/examples/material_gallery/flutter.yaml +++ b/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 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 00000000000..3f74e934c48 --- /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 description; + + bool get isValid => assetName != null && title != null && description?.length == 3; +} + +final List destinations = [ + const TravelDestination( + assetName: 'packages/flutter_gallery_assets/top_10_australian_beaches.png', + title: 'Top 10 Australian beaches', + description: const [ + '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 [ + '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: [ + // photo and title + new SizedBox( + height: 184.0, + child: new Stack( + children: [ + 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: [ + // 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: [ + 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 381eaa2d378..059df91eec3 100644 --- a/examples/material_gallery/lib/gallery/home.dart +++ b/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 { colors: Colors.amber, demos: [ 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 daa0bc72a8b..d0621def438 100644 --- a/examples/material_gallery/pubspec.yaml +++ b/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'