mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
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.
This commit is contained in:
parent
94c9b232af
commit
cc4234821b
3
examples/material_gallery/flutter.yaml
Normal file
3
examples/material_gallery/flutter.yaml
Normal file
@ -0,0 +1,3 @@
|
||||
name: material_gallery
|
||||
material-design-icons:
|
||||
- name: navigation/cancel
|
||||
51
examples/material_gallery/lib/chip_demo.dart
Normal file
51
examples/material_gallery/lib/chip_demo.dart
Normal file
@ -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<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()
|
||||
);
|
||||
20
examples/material_gallery/lib/gallery_page.dart
Normal file
20
examples/material_gallery/lib/gallery_page.dart
Normal file
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
24
examples/material_gallery/lib/main.dart
Normal file
24
examples/material_gallery/lib/main.dart
Normal file
@ -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<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
|
||||
));
|
||||
}
|
||||
13
examples/material_gallery/lib/widget_demo.dart
Normal file
13
examples/material_gallery/lib/widget_demo.dart
Normal file
@ -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;
|
||||
}
|
||||
4
examples/material_gallery/pubspec.yaml
Normal file
4
examples/material_gallery/pubspec.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
name: material_gallery
|
||||
dependencies:
|
||||
flutter:
|
||||
path: ../../packages/flutter
|
||||
@ -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';
|
||||
|
||||
71
packages/flutter/lib/src/material/chip.dart
Normal file
71
packages/flutter/lib/src/material/chip.dart
Normal file
@ -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<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)
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user