99bca282c9
ScrollableList2 uses the same pattern as ScrollableGrid, which requires the client to allocate widgets for every list item but doesn't inflate them unless they're actually needed for the view. It improves on the original ScrollableList by not requiring a rebuild of the whole visible portion of the list when scrolling. In fact, small scrolls can often be handled entirely by repainting.
98 lines
2.3 KiB
Dart
98 lines
2.3 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 _maxTileWidth = 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 ScrollableList2(
|
|
itemExtent: 50.0,
|
|
children: items.map((AdaptiveItem item) => item.toListItem()).toList()
|
|
);
|
|
} else {
|
|
return new ScrollableGrid(
|
|
delegate: new MaxTileWidthGridDelegate(maxTileWidth: _maxTileWidth),
|
|
children: items.map((AdaptiveItem item) => item.toCard()).toList()
|
|
);
|
|
}
|
|
}
|
|
|
|
Widget build(BuildContext context) {
|
|
return new Scaffold(
|
|
toolBar: new ToolBar(
|
|
center: new Text("Media Query Example")
|
|
),
|
|
body: new Material(
|
|
child: _buildBody(context)
|
|
)
|
|
);
|
|
}
|
|
}
|