Merge pull request #550 from abarth/material_chip

Add basic support for material chips

examples/material_gallery/flutter.yaml

+name: material_gallery
+material-design-icons:
+  - name: navigation/cancel

examples/material_gallery/lib/chip_demo.dart

+// 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<ChipDemo> {
+  bool _showBananas = true;
+
+  void _deleteBananas() {
+    setState(() {
+      _showBananas = false;
+    });
+  }
+
+  Widget build(BuildContext context) {
+    List<Widget> chips = <Widget>[
+      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()
+);

examples/material_gallery/lib/gallery_page.dart

+// 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)
+    );
+  }
+}

examples/material_gallery/lib/main.dart

+// 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<WidgetDemo> _kDemos = <WidgetDemo>[
+  kChipDemo
+];
+
+void main() {
+  Map<String, RouteBuilder> routes = new Map<String, RouteBuilder>();
+  for (WidgetDemo demo in _kDemos)
+    routes[demo.route] = (_) => new GalleryPage(demo: demo);
+
+  runApp(new MaterialApp(
+    title: 'Material Gallery',
+    routes: routes
+  ));
+}

examples/material_gallery/lib/widget_demo.dart

+// 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;
+}

examples/material_gallery/pubspec.yaml

+name: material_gallery
+dependencies:
+  flutter:
+    path: ../../packages/flutter

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';

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

+// 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<Widget> children = <Widget>[
+      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)
+    );
+  }
+}