diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml new file mode 100644 index 00000000000..d4888d9c762 --- /dev/null +++ b/examples/material_gallery/flutter.yaml @@ -0,0 +1,3 @@ +name: material_gallery +material-design-icons: + - name: navigation/cancel diff --git a/examples/material_gallery/lib/chip_demo.dart b/examples/material_gallery/lib/chip_demo.dart new file mode 100644 index 00000000000..2577400b738 --- /dev/null +++ b/examples/material_gallery/lib/chip_demo.dart @@ -0,0 +1,51 @@ +// Copyright 2015 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 'widget_demo.dart'; + +class ChipDemo extends StatefulComponent { + _ChipDemoState createState() => new _ChipDemoState(); +} + +class _ChipDemoState extends State { + bool _showBananas = true; + + void _deleteBananas() { + setState(() { + _showBananas = false; + }); + } + + Widget build(BuildContext context) { + List chips = [ + new Chip( + label: new Text('Apple') + ) + ]; + + if (_showBananas) { + chips.add(new Chip( + label: new Text('Bananas'), + onDeleted: _deleteBananas + )); + } + + return new Block(chips.map((Widget widget) { + return new Container( + height: 100.0, + child: new Center( + child: widget + ) + ); + }).toList()); + } +} + +final WidgetDemo kChipDemo = new WidgetDemo( + title: 'Chips', + route: '/', + builder: (_) => new ChipDemo() +); diff --git a/examples/material_gallery/lib/gallery_page.dart b/examples/material_gallery/lib/gallery_page.dart new file mode 100644 index 00000000000..6353ad7bc87 --- /dev/null +++ b/examples/material_gallery/lib/gallery_page.dart @@ -0,0 +1,20 @@ +// Copyright 2015 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 'widget_demo.dart'; + +class GalleryPage extends StatelessComponent { + GalleryPage({ this.demo }); + + final WidgetDemo demo; + + Widget build(BuildContext context) { + return new Scaffold( + toolBar: new ToolBar(center: new Text(demo.title)), + body: demo.builder(context) + ); + } +} diff --git a/examples/material_gallery/lib/main.dart b/examples/material_gallery/lib/main.dart new file mode 100644 index 00000000000..7c1c4b7edf4 --- /dev/null +++ b/examples/material_gallery/lib/main.dart @@ -0,0 +1,24 @@ +// Copyright 2015 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 'chip_demo.dart'; +import 'gallery_page.dart'; +import 'widget_demo.dart'; + +final List _kDemos = [ + kChipDemo +]; + +void main() { + Map routes = new Map(); + for (WidgetDemo demo in _kDemos) + routes[demo.route] = (_) => new GalleryPage(demo: demo); + + runApp(new MaterialApp( + title: 'Material Gallery', + routes: routes + )); +} diff --git a/examples/material_gallery/lib/widget_demo.dart b/examples/material_gallery/lib/widget_demo.dart new file mode 100644 index 00000000000..5fb53197017 --- /dev/null +++ b/examples/material_gallery/lib/widget_demo.dart @@ -0,0 +1,13 @@ +// Copyright 2015 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'; + +class WidgetDemo { + WidgetDemo({ this.title, this.route, this.builder }); + + final String title; + final String route; + final WidgetBuilder builder; +} diff --git a/examples/material_gallery/pubspec.yaml b/examples/material_gallery/pubspec.yaml new file mode 100644 index 00000000000..c358d7b31fd --- /dev/null +++ b/examples/material_gallery/pubspec.yaml @@ -0,0 +1,4 @@ +name: material_gallery +dependencies: + flutter: + path: ../../packages/flutter diff --git a/packages/flutter/lib/material.dart b/packages/flutter/lib/material.dart index a2807153f2e..fbfc79c6323 100644 --- a/packages/flutter/lib/material.dart +++ b/packages/flutter/lib/material.dart @@ -10,6 +10,7 @@ library material; export 'src/material/bottom_sheet.dart'; export 'src/material/card.dart'; export 'src/material/checkbox.dart'; +export 'src/material/chip.dart'; export 'src/material/circle_avatar.dart'; export 'src/material/colors.dart'; export 'src/material/constants.dart'; diff --git a/packages/flutter/lib/src/material/chip.dart b/packages/flutter/lib/src/material/chip.dart new file mode 100644 index 00000000000..e505c3e42c7 --- /dev/null +++ b/packages/flutter/lib/src/material/chip.dart @@ -0,0 +1,71 @@ +// Copyright 2015 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'; + +import 'colors.dart'; +import 'icon.dart'; + +const TextStyle _kLabelStyle = const TextStyle( + inherit: false, + fontSize: 13.0, + fontWeight: FontWeight.w400, + color: Colors.black87, + textBaseline: TextBaseline.alphabetic +); + +final ColorFilter _kIconColorFilter = new ColorFilter.mode( + Colors.black54, TransferMode.dstIn); + +class Chip extends StatelessComponent { + const Chip({ + Key key, + this.icon, + this.label, + this.onDeleted + }) : super(key: key); + + final Widget icon; + final Widget label; + final VoidCallback onDeleted; + + Widget build(BuildContext context) { + final bool deletable = onDeleted != null; + + List children = [ + new DefaultTextStyle( + style: _kLabelStyle, + child: label + ) + ]; + + if (deletable) { + children.add(new GestureDetector( + onTap: onDeleted, + child: new Container( + padding: const EdgeDims.symmetric(horizontal: 4.0), + child: new Icon( + icon: 'navigation/cancel', + size: IconSize.s18, + colorFilter: _kIconColorFilter + ) + ) + )); + } + + EdgeDims padding = deletable ? + new EdgeDims.only(left: 12.0) : + new EdgeDims.symmetric(horizontal: 12.0); + + return new Container( + height: 32.0, + padding: padding, + decoration: new BoxDecoration( + backgroundColor: Colors.grey[300], + borderRadius: 16.0 + ), + child: new Row(children, justifyContent: FlexJustifyContent.collapse) + ); + } +}