2015-08-17 23:48:13 +00:00
|
|
|
// 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.
|
|
|
|
|
2015-09-06 22:38:26 +00:00
|
|
|
import 'package:sky/animation.dart';
|
2015-09-18 16:49:20 +00:00
|
|
|
import 'package:sky/material.dart';
|
2015-09-24 22:31:06 +00:00
|
|
|
import 'package:sky/painting.dart';
|
2015-10-01 16:35:27 +00:00
|
|
|
import 'package:sky/widgets.dart';
|
2015-08-17 23:48:13 +00:00
|
|
|
|
|
|
|
class CardModel {
|
|
|
|
CardModel(this.value, this.size, this.color);
|
|
|
|
int value;
|
|
|
|
Size size;
|
|
|
|
Color color;
|
|
|
|
String get label => "Card $value";
|
2015-08-28 17:52:23 +00:00
|
|
|
Key get key => new ObjectKey(this);
|
2015-08-17 23:48:13 +00:00
|
|
|
}
|
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
class PageableListApp extends StatefulComponent {
|
2015-09-24 23:09:37 +00:00
|
|
|
PageableListAppState createState() => new PageableListAppState();
|
2015-09-24 22:31:06 +00:00
|
|
|
}
|
2015-08-17 23:48:13 +00:00
|
|
|
|
2015-09-24 22:45:47 +00:00
|
|
|
class PageableListAppState extends State<PageableListApp> {
|
2015-09-30 20:15:46 +00:00
|
|
|
void initState() {
|
|
|
|
super.initState();
|
2015-08-17 23:48:13 +00:00
|
|
|
List<Size> cardSizes = [
|
|
|
|
[100.0, 300.0], [300.0, 100.0], [200.0, 400.0], [400.0, 400.0], [300.0, 400.0]
|
|
|
|
]
|
|
|
|
.map((args) => new Size(args[0], args[1]))
|
|
|
|
.toList();
|
|
|
|
|
|
|
|
cardModels = new List.generate(cardSizes.length, (i) {
|
2015-09-18 16:49:20 +00:00
|
|
|
Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardSizes.length);
|
2015-08-17 23:48:13 +00:00
|
|
|
return new CardModel(i, cardSizes[i], color);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
static const TextStyle cardLabelStyle =
|
|
|
|
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
|
|
|
|
|
|
|
|
List<CardModel> cardModels;
|
|
|
|
Size pageSize = new Size(200.0, 200.0);
|
|
|
|
ScrollDirection scrollDirection = ScrollDirection.horizontal;
|
|
|
|
bool itemsWrap = false;
|
|
|
|
|
2015-08-17 23:48:13 +00:00
|
|
|
void updatePageSize(Size newSize) {
|
|
|
|
setState(() {
|
|
|
|
pageSize = newSize;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
Widget buildCard(BuildContext context, CardModel cardModel) {
|
2015-08-17 23:48:13 +00:00
|
|
|
Widget card = new Card(
|
|
|
|
color: cardModel.color,
|
|
|
|
child: new Container(
|
|
|
|
width: cardModel.size.width,
|
|
|
|
height: cardModel.size.height,
|
|
|
|
padding: const EdgeDims.all(8.0),
|
|
|
|
child: new Center(child: new Text(cardModel.label, style: cardLabelStyle))
|
|
|
|
)
|
|
|
|
);
|
2015-08-19 19:32:14 +00:00
|
|
|
|
|
|
|
BoxConstraints constraints = (scrollDirection == ScrollDirection.vertical)
|
|
|
|
? new BoxConstraints.tightFor(height: pageSize.height)
|
|
|
|
: new BoxConstraints.tightFor(width: pageSize.width);
|
|
|
|
|
2015-08-17 23:48:13 +00:00
|
|
|
return new Container(
|
|
|
|
key: cardModel.key,
|
2015-08-19 19:32:14 +00:00
|
|
|
constraints: constraints,
|
2015-08-17 23:48:13 +00:00
|
|
|
child: new Center(child: card)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-09-02 22:36:20 +00:00
|
|
|
void switchScrollDirection() {
|
2015-08-21 23:12:19 +00:00
|
|
|
setState(() {
|
|
|
|
scrollDirection = (scrollDirection == ScrollDirection.vertical)
|
|
|
|
? ScrollDirection.horizontal
|
|
|
|
: ScrollDirection.vertical;
|
|
|
|
});
|
2015-09-02 22:36:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
void toggleItemsWrap() {
|
|
|
|
setState(() {
|
|
|
|
itemsWrap = !itemsWrap;
|
|
|
|
});
|
2015-08-21 23:12:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
bool _drawerShowing = false;
|
|
|
|
AnimationStatus _drawerStatus = AnimationStatus.dismissed;
|
|
|
|
|
|
|
|
void _handleOpenDrawer() {
|
|
|
|
setState(() {
|
|
|
|
_drawerShowing = true;
|
|
|
|
_drawerStatus = AnimationStatus.forward;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
void _handleDrawerDismissed() {
|
|
|
|
setState(() {
|
|
|
|
_drawerStatus = AnimationStatus.dismissed;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
Drawer buildDrawer() {
|
|
|
|
if (_drawerStatus == AnimationStatus.dismissed)
|
|
|
|
return null;
|
|
|
|
|
|
|
|
return new Drawer(
|
|
|
|
level: 3,
|
|
|
|
showing: _drawerShowing,
|
|
|
|
onDismissed: _handleDrawerDismissed,
|
|
|
|
children: [
|
|
|
|
new DrawerHeader(child: new Text('Options')),
|
|
|
|
new DrawerItem(
|
|
|
|
icon: 'navigation/more_horiz',
|
|
|
|
selected: scrollDirection == ScrollDirection.horizontal,
|
|
|
|
child: new Text('Horizontal Layout'),
|
|
|
|
onPressed: switchScrollDirection
|
|
|
|
),
|
|
|
|
new DrawerItem(
|
|
|
|
icon: 'navigation/more_vert',
|
|
|
|
selected: scrollDirection == ScrollDirection.vertical,
|
|
|
|
child: new Text('Vertical Layout'),
|
|
|
|
onPressed: switchScrollDirection
|
2015-09-02 22:36:20 +00:00
|
|
|
),
|
|
|
|
new DrawerItem(
|
|
|
|
onPressed: toggleItemsWrap,
|
|
|
|
child: new Row([
|
|
|
|
new Flexible(child: new Text('Scrolling wraps around')),
|
|
|
|
new Checkbox(value: itemsWrap)
|
|
|
|
])
|
2015-08-21 23:12:19 +00:00
|
|
|
)
|
|
|
|
]
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
Widget buildToolBar() {
|
|
|
|
return new ToolBar(
|
|
|
|
left: new IconButton(icon: "navigation/menu", onPressed: _handleOpenDrawer),
|
|
|
|
center: new Text('PageableList'),
|
|
|
|
right: [
|
|
|
|
new Text(scrollDirection == ScrollDirection.horizontal ? "horizontal" : "vertical")
|
|
|
|
]
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
Widget buildBody(BuildContext context) {
|
2015-08-17 23:48:13 +00:00
|
|
|
Widget list = new PageableList<CardModel>(
|
|
|
|
items: cardModels,
|
2015-09-02 22:36:20 +00:00
|
|
|
itemsWrap: itemsWrap,
|
2015-08-17 23:48:13 +00:00
|
|
|
itemBuilder: buildCard,
|
2015-08-19 19:32:14 +00:00
|
|
|
scrollDirection: scrollDirection,
|
|
|
|
itemExtent: (scrollDirection == ScrollDirection.vertical)
|
|
|
|
? pageSize.height
|
|
|
|
: pageSize.width
|
2015-08-17 23:48:13 +00:00
|
|
|
);
|
2015-08-21 23:12:19 +00:00
|
|
|
return new SizeObserver(
|
|
|
|
callback: updatePageSize,
|
|
|
|
child: new Container(
|
|
|
|
child: list,
|
2015-09-24 22:31:06 +00:00
|
|
|
decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50])
|
2015-08-21 23:12:19 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
2015-08-17 23:48:13 +00:00
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
Widget build(BuildContext context) {
|
2015-08-17 23:48:13 +00:00
|
|
|
return new IconTheme(
|
|
|
|
data: const IconThemeData(color: IconThemeColor.white),
|
|
|
|
child: new Theme(
|
|
|
|
data: new ThemeData(
|
|
|
|
brightness: ThemeBrightness.light,
|
2015-09-18 16:49:20 +00:00
|
|
|
primarySwatch: Colors.blue,
|
|
|
|
accentColor: Colors.redAccent[200]
|
2015-08-17 23:48:13 +00:00
|
|
|
),
|
2015-08-21 18:27:17 +00:00
|
|
|
child: new Title(
|
|
|
|
title: 'PageableList',
|
2015-08-17 23:48:13 +00:00
|
|
|
child: new Scaffold(
|
2015-08-21 23:12:19 +00:00
|
|
|
drawer: buildDrawer(),
|
|
|
|
toolbar: buildToolBar(),
|
2015-09-24 22:31:06 +00:00
|
|
|
body: buildBody(context)
|
2015-08-17 23:48:13 +00:00
|
|
|
)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
void main() {
|
2015-08-19 19:32:14 +00:00
|
|
|
runApp(new PageableListApp());
|
2015-08-17 23:48:13 +00:00
|
|
|
}
|