Commit cc423482 authored by Adam Barth's avatar Adam Barth

Add basic support for material chips:

http://www.google.com/design/spec/components/chips.html#chips-behavior

This patch adds support for deletable and non-deleteable chips, but doesn't yet
add support for contact chips. Also, demo the chips in a new Material Gallery
app that will let us demo our gallery of widgets in a single app.
parent 94c9b232
name: material_gallery
material-design-icons:
- name: navigation/cancel
// 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()
);
// 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)
);
}
}
// 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
));
}
// 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;
}
name: material_gallery
dependencies:
flutter:
path: ../../packages/flutter
...@@ -10,6 +10,7 @@ library material; ...@@ -10,6 +10,7 @@ library material;
export 'src/material/bottom_sheet.dart'; export 'src/material/bottom_sheet.dart';
export 'src/material/card.dart'; export 'src/material/card.dart';
export 'src/material/checkbox.dart'; export 'src/material/checkbox.dart';
export 'src/material/chip.dart';
export 'src/material/circle_avatar.dart'; export 'src/material/circle_avatar.dart';
export 'src/material/colors.dart'; export 'src/material/colors.dart';
export 'src/material/constants.dart'; export 'src/material/constants.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)
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment