mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
101 lines
2.2 KiB
Dart
101 lines
2.2 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
void main() {
|
|
runApp(
|
|
new MaterialApp(
|
|
title: "Media Query Example",
|
|
routes: <String, RouteBuilder>{
|
|
'/': (RouteArguments args) => new MediaQueryExample()
|
|
}
|
|
)
|
|
);
|
|
}
|
|
|
|
class AdaptiveItem {
|
|
AdaptiveItem(this.name);
|
|
String name;
|
|
|
|
Widget toListItem() {
|
|
return new Row(
|
|
<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)
|
|
]
|
|
);
|
|
}
|
|
|
|
Widget toCard() {
|
|
return new Card(
|
|
child: new Column(
|
|
<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(
|
|
<Widget>[
|
|
new Flexible(
|
|
child: new Text(name)
|
|
),
|
|
new IconButton(
|
|
icon: "navigation/more_vert"
|
|
)
|
|
]
|
|
)
|
|
)
|
|
]
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
class MediaQueryExample extends StatelessComponent {
|
|
static const double _maxChildExtent = 150.0;
|
|
static const double _gridViewBreakpoint = 450.0;
|
|
|
|
Widget _buildBody(BuildContext context) {
|
|
List<AdaptiveItem> items = <AdaptiveItem>[];
|
|
|
|
for (int i = 0; i < 30; i++)
|
|
items.add(new AdaptiveItem("Item $i"));
|
|
|
|
if (MediaQuery.of(context).size.width < _gridViewBreakpoint) {
|
|
return new Block(
|
|
items.map((AdaptiveItem item) => item.toListItem()).toList()
|
|
);
|
|
} else {
|
|
return new Block(
|
|
<Widget>[
|
|
new Grid(
|
|
items.map((AdaptiveItem item) => item.toCard()).toList(),
|
|
maxChildExtent: _maxChildExtent
|
|
)
|
|
]
|
|
);
|
|
}
|
|
}
|
|
|
|
Widget build(BuildContext context) {
|
|
return new Scaffold(
|
|
toolBar: new ToolBar(
|
|
center: new Text("Media Query Example")
|
|
),
|
|
body: new Material(
|
|
child: _buildBody(context)
|
|
)
|
|
);
|
|
}
|
|
}
|