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;
|
2017-02-08 23:23:16 +00:00
|
|
|
String get label => 'Card $value';
|
2018-09-12 06:29:29 +00:00
|
|
|
Key get key => ObjectKey(this);
|
2015-08-17 23:48:13 +00:00
|
|
|
}
|
|
|
|
|
2017-02-08 23:23:16 +00:00
|
|
|
class PageViewApp extends StatefulWidget {
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2018-09-12 06:29:29 +00:00
|
|
|
PageViewAppState createState() => PageViewAppState();
|
2015-09-24 22:31:06 +00:00
|
|
|
}
|
2015-08-17 23:48:13 +00:00
|
|
|
|
2017-02-08 23:23:16 +00:00
|
|
|
class PageViewAppState extends State<PageViewApp> {
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2015-09-30 20:15:46 +00:00
|
|
|
void initState() {
|
|
|
|
super.initState();
|
2018-08-02 10:02:32 +00:00
|
|
|
const List<Size> cardSizes = <Size>[
|
|
|
|
Size(100.0, 300.0),
|
|
|
|
Size(300.0, 100.0),
|
|
|
|
Size(200.0, 400.0),
|
|
|
|
Size(400.0, 400.0),
|
|
|
|
Size(300.0, 400.0),
|
2017-02-08 23:23:16 +00:00
|
|
|
];
|
2015-08-17 23:48:13 +00:00
|
|
|
|
2018-09-12 06:29:29 +00:00
|
|
|
cardModels = List<CardModel>.generate(cardSizes.length, (int i) {
|
2017-03-21 22:14:55 +00:00
|
|
|
final Color color = Color.lerp(Colors.red.shade300, Colors.blue.shade900, i / cardSizes.length);
|
2018-09-12 06:29:29 +00:00
|
|
|
return CardModel(i, cardSizes[i], color);
|
2015-08-17 23:48:13 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2015-09-24 22:31:06 +00:00
|
|
|
static const TextStyle cardLabelStyle =
|
2018-08-02 10:02:32 +00:00
|
|
|
TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);
|
2015-09-24 22:31:06 +00:00
|
|
|
|
|
|
|
List<CardModel> cardModels;
|
2017-02-21 22:54:29 +00:00
|
|
|
Size pageSize = const 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) {
|
2018-09-12 06:29:29 +00:00
|
|
|
final Widget card = Card(
|
2015-08-17 23:48:13 +00:00
|
|
|
color: cardModel.color,
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Container(
|
2015-08-17 23:48:13 +00:00
|
|
|
width: cardModel.size.width,
|
|
|
|
height: cardModel.size.height,
|
2016-03-12 19:43:18 +00:00
|
|
|
padding: const EdgeInsets.all(8.0),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Center(child: Text(cardModel.label, style: cardLabelStyle)),
|
2017-02-08 23:23:16 +00:00
|
|
|
),
|
2015-08-17 23:48:13 +00:00
|
|
|
);
|
2015-08-19 19:32:14 +00:00
|
|
|
|
2017-03-04 02:06:08 +00:00
|
|
|
final BoxConstraints constraints = (scrollDirection == Axis.vertical)
|
2018-09-12 06:29:29 +00:00
|
|
|
? BoxConstraints.tightFor(height: pageSize.height)
|
|
|
|
: BoxConstraints.tightFor(width: pageSize.width);
|
2015-08-19 19:32:14 +00:00
|
|
|
|
2018-09-12 06:29:29 +00:00
|
|
|
return Container(
|
2015-08-17 23:48:13 +00:00
|
|
|
key: cardModel.key,
|
2015-08-19 19:32:14 +00:00
|
|
|
constraints: constraints,
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Center(child: card),
|
2015-08-17 23:48:13 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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() {
|
2018-09-12 06:29:29 +00:00
|
|
|
return Drawer(
|
|
|
|
child: ListView(
|
2017-01-26 05:59:03 +00:00
|
|
|
children: <Widget>[
|
2018-08-02 10:02:32 +00:00
|
|
|
const DrawerHeader(child: Center(child: Text('Options'))),
|
2018-09-12 06:29:29 +00:00
|
|
|
ListTile(
|
2017-04-10 21:20:47 +00:00
|
|
|
leading: const Icon(Icons.more_horiz),
|
2017-01-26 05:59:03 +00:00
|
|
|
selected: scrollDirection == Axis.horizontal,
|
2017-04-07 19:24:32 +00:00
|
|
|
trailing: const Text('Horizontal Layout'),
|
2017-03-24 22:34:43 +00:00
|
|
|
onTap: switchScrollDirection,
|
2017-01-26 05:59:03 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
ListTile(
|
2017-04-08 06:43:19 +00:00
|
|
|
leading: const Icon(Icons.more_vert),
|
2017-01-26 05:59:03 +00:00
|
|
|
selected: scrollDirection == Axis.vertical,
|
2017-04-07 19:24:32 +00:00
|
|
|
trailing: const Text('Vertical Layout'),
|
2017-03-24 22:34:43 +00:00
|
|
|
onTap: switchScrollDirection,
|
2017-01-26 05:59:03 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
ListTile(
|
2017-03-24 22:34:43 +00:00
|
|
|
onTap: toggleItemsWrap,
|
2017-04-07 19:24:32 +00:00
|
|
|
title: const Text('Scrolling wraps around'),
|
2017-03-24 22:34:43 +00:00
|
|
|
// TODO(abarth): Actually make this checkbox change this value.
|
2018-09-12 06:29:29 +00:00
|
|
|
trailing: Checkbox(value: itemsWrap, onChanged: null),
|
2017-02-08 23:23:16 +00:00
|
|
|
),
|
|
|
|
],
|
|
|
|
),
|
2015-08-21 23:12:19 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-13 01:22:40 +00:00
|
|
|
Widget _buildAppBar() {
|
2018-09-12 06:29:29 +00:00
|
|
|
return AppBar(
|
2017-04-07 19:24:32 +00:00
|
|
|
title: const Text('PageView'),
|
2016-03-13 01:22:40 +00:00
|
|
|
actions: <Widget>[
|
2018-09-12 06:29:29 +00:00
|
|
|
Text(scrollDirection == Axis.horizontal ? 'horizontal' : 'vertical'),
|
2017-02-08 23:23:16 +00:00
|
|
|
],
|
2015-08-21 23:12:19 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-12-03 07:58:39 +00:00
|
|
|
Widget _buildBody(BuildContext context) {
|
2018-09-12 06:29:29 +00:00
|
|
|
return PageView(
|
2017-02-03 00:16:20 +00:00
|
|
|
children: cardModels.map(buildCard).toList(),
|
|
|
|
// TODO(abarth): itemsWrap: itemsWrap,
|
2017-02-08 23:23:16 +00:00
|
|
|
scrollDirection: scrollDirection,
|
2015-08-21 23:12:19 +00:00
|
|
|
);
|
|
|
|
}
|
2015-08-17 23:48:13 +00:00
|
|
|
|
2016-03-14 20:31:43 +00:00
|
|
|
@override
|
2015-09-24 22:31:06 +00:00
|
|
|
Widget build(BuildContext context) {
|
2018-09-12 06:29:29 +00:00
|
|
|
return IconTheme(
|
2016-03-02 18:08:12 +00:00
|
|
|
data: const IconThemeData(color: Colors.white),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: Scaffold(
|
2016-03-13 01:22:40 +00:00
|
|
|
appBar: _buildAppBar(),
|
2015-12-03 07:58:39 +00:00
|
|
|
drawer: _buildDrawer(),
|
2017-02-08 23:23:16 +00:00
|
|
|
body: _buildBody(context),
|
|
|
|
),
|
2015-08-17 23:48:13 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
void main() {
|
2018-09-12 06:29:29 +00:00
|
|
|
runApp(MaterialApp(
|
2017-02-08 23:23:16 +00:00
|
|
|
title: 'PageView',
|
2018-09-12 06:29:29 +00:00
|
|
|
theme: ThemeData(
|
2016-06-07 21:39:15 +00:00
|
|
|
brightness: Brightness.light,
|
2015-10-04 20:13:39 +00:00
|
|
|
primarySwatch: Colors.blue,
|
2017-03-21 22:14:55 +00:00
|
|
|
accentColor: Colors.redAccent,
|
2015-10-04 20:13:39 +00:00
|
|
|
),
|
2018-09-12 06:29:29 +00:00
|
|
|
home: PageViewApp(),
|
2015-10-04 20:13:39 +00:00
|
|
|
));
|
2015-08-17 23:48:13 +00:00
|
|
|
}
|