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-10-10 03:44:52 +00:00
|
|
|
import 'package:flutter/material.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();
|
|
|
|
|
2015-10-22 20:29:12 +00:00
|
|
|
cardModels = new List<CardModel>.generate(cardSizes.length, (int 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 =
|
2015-12-09 22:02:58 +00:00
|
|
|
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);
|
2015-09-24 22:31:06 +00:00
|
|
|
|
|
|
|
List<CardModel> cardModels;
|
|
|
|
Size pageSize = new Size(200.0, 200.0);
|
2016-01-11 19:21:17 +00:00
|
|
|
Axis scrollDirection = Axis.horizontal;
|
2015-09-24 22:31:06 +00:00
|
|
|
bool itemsWrap = false;
|
|
|
|
|
2016-01-06 23:13:40 +00:00
|
|
|
Widget buildCard(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
|
|
|
|
2016-01-11 19:21:17 +00:00
|
|
|
BoxConstraints constraints = (scrollDirection == Axis.vertical)
|
2015-08-19 19:32:14 +00:00
|
|
|
? 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(() {
|
2016-01-11 19:21:17 +00:00
|
|
|
scrollDirection = (scrollDirection == Axis.vertical)
|
|
|
|
? Axis.horizontal
|
|
|
|
: Axis.vertical;
|
2015-08-21 23:12:19 +00:00
|
|
|
});
|
2015-09-02 22:36:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
void toggleItemsWrap() {
|
|
|
|
setState(() {
|
|
|
|
itemsWrap = !itemsWrap;
|
|
|
|
});
|
2015-08-21 23:12:19 +00:00
|
|
|
}
|
|
|
|
|
2015-12-03 07:58:39 +00:00
|
|
|
Widget _buildDrawer() {
|
|
|
|
return new Drawer(
|
2016-01-22 00:59:52 +00:00
|
|
|
child: new Block(children: <Widget>[
|
2015-08-21 23:12:19 +00:00
|
|
|
new DrawerHeader(child: new Text('Options')),
|
|
|
|
new DrawerItem(
|
2016-03-02 04:27:35 +00:00
|
|
|
icon: Icons.more_horiz,
|
2016-01-11 19:21:17 +00:00
|
|
|
selected: scrollDirection == Axis.horizontal,
|
2015-08-21 23:12:19 +00:00
|
|
|
child: new Text('Horizontal Layout'),
|
|
|
|
onPressed: switchScrollDirection
|
|
|
|
),
|
|
|
|
new DrawerItem(
|
2016-03-02 04:27:35 +00:00
|
|
|
icon: Icons.more_vert,
|
2016-01-11 19:21:17 +00:00
|
|
|
selected: scrollDirection == Axis.vertical,
|
2015-08-21 23:12:19 +00:00
|
|
|
child: new Text('Vertical Layout'),
|
|
|
|
onPressed: switchScrollDirection
|
2015-09-02 22:36:20 +00:00
|
|
|
),
|
|
|
|
new DrawerItem(
|
|
|
|
onPressed: toggleItemsWrap,
|
2016-01-11 21:08:47 +00:00
|
|
|
child: new Row(
|
|
|
|
children: <Widget>[
|
|
|
|
new Flexible(child: new Text('Scrolling wraps around')),
|
|
|
|
new Checkbox(value: itemsWrap)
|
|
|
|
]
|
|
|
|
)
|
2015-08-21 23:12:19 +00:00
|
|
|
)
|
2015-10-04 20:13:39 +00:00
|
|
|
])
|
2015-08-21 23:12:19 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-12-03 07:58:39 +00:00
|
|
|
Widget _buildToolBar() {
|
2015-08-21 23:12:19 +00:00
|
|
|
return new ToolBar(
|
|
|
|
center: new Text('PageableList'),
|
2015-10-22 20:29:12 +00:00
|
|
|
right: <Widget>[
|
2016-01-11 19:21:17 +00:00
|
|
|
new Text(scrollDirection == Axis.horizontal ? "horizontal" : "vertical")
|
2015-08-21 23:12:19 +00:00
|
|
|
]
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-12-03 07:58:39 +00:00
|
|
|
Widget _buildBody(BuildContext context) {
|
2016-01-06 23:13:40 +00:00
|
|
|
return new PageableList(
|
|
|
|
children: cardModels.map(buildCard),
|
2015-09-02 22:36:20 +00:00
|
|
|
itemsWrap: itemsWrap,
|
2015-12-08 21:49:20 +00:00
|
|
|
scrollDirection: scrollDirection
|
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),
|
2015-10-04 20:13:39 +00:00
|
|
|
child: new Scaffold(
|
2015-12-03 07:58:39 +00:00
|
|
|
toolBar: _buildToolBar(),
|
|
|
|
drawer: _buildDrawer(),
|
|
|
|
body: _buildBody(context)
|
2015-08-17 23:48:13 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
void main() {
|
2015-10-09 17:19:35 +00:00
|
|
|
runApp(new MaterialApp(
|
2015-10-04 20:13:39 +00:00
|
|
|
title: 'PageableList',
|
|
|
|
theme: new ThemeData(
|
|
|
|
brightness: ThemeBrightness.light,
|
|
|
|
primarySwatch: Colors.blue,
|
|
|
|
accentColor: Colors.redAccent[200]
|
|
|
|
),
|
2015-10-22 20:29:12 +00:00
|
|
|
routes: <String, RouteBuilder>{
|
2015-10-22 18:17:20 +00:00
|
|
|
'/': (RouteArguments args) => new PageableListApp(),
|
2015-10-04 20:13:39 +00:00
|
|
|
}
|
|
|
|
));
|
2015-08-17 23:48:13 +00:00
|
|
|
}
|