flutter/examples/layers/widgets/media_query.dart
Adam Barth 870894fc68 Switch Material Design icons to using the iconfont
Rather than managing all the Material Design icons manually, we now
manage them using an icon font. The icon font contains glyphs for each
icon in an efficient vector format.

This patch updates the FLX tooling to include the MaterialIcons font and
updates the Icon widget to use the font instead of asset images.

Fixes #2313
Fixes #2218
Fixes #2009
Fixes #994
2016-03-02 09:32:02 -08:00

112 lines
2.8 KiB
Dart

// 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';
class AdaptedListItem extends StatelessComponent {
AdaptedListItem({ Key key, this.name }) : super(key: key);
final String name;
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new Container(
width: 32.0,
height: 32.0,
margin: const EdgeDims.all(8.0),
decoration: new BoxDecoration(
backgroundColor: Colors.lightBlueAccent[100]
)
),
new Text(name)
]
);
}
}
class AdaptedGridItem extends StatelessComponent {
AdaptedGridItem({ Key key, this.name }) : super(key: key);
final String name;
Widget build(BuildContext context) {
return new Card(
child: new Column(
children: <Widget>[
new Flexible(
child: new Container(
decoration: new BoxDecoration(
backgroundColor: Colors.lightBlueAccent[100]
)
)
),
new Container(
margin: const EdgeDims.only(left: 8.0),
child: new Row(
children: <Widget>[
new Flexible(
child: new Text(name)
),
new IconButton(
icon: Icons.more_vert
)
]
)
)
]
)
);
}
}
const double _kListItemExtent = 50.0;
const double _kMaxTileWidth = 150.0;
const double _kGridViewBreakpoint = 450.0;
class AdaptiveContainer extends StatelessComponent {
AdaptiveContainer({ Key key, this.names }) : super(key: key);
final List<String> names;
Widget build(BuildContext context) {
if (MediaQuery.of(context).size.width < _kGridViewBreakpoint) {
return new ScrollableList(
itemExtent: _kListItemExtent,
children: names.map((String name) => new AdaptedListItem(name: name))
);
} else {
return new ScrollableGrid(
delegate: new MaxTileWidthGridDelegate(maxTileWidth: _kMaxTileWidth),
children: names.map((String name) => new AdaptedGridItem(name: name))
);
}
}
}
List<String> _initNames() {
List<String> names = <String>[];
for (int i = 0; i < 30; i++)
names.add('Item $i');
return names;
}
final List<String> _kNames = _initNames();
void main() {
runApp(new MaterialApp(
title: 'Media Query Example',
routes: <String, RouteBuilder>{
'/': (RouteArguments args) {
return new Scaffold(
toolBar: new ToolBar(
center: new Text('Media Query Example')
),
body: new Material(child: new AdaptiveContainer(names: _kNames))
);
}
}
));
}