1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
// 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.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugDumpRenderTree;
class CardModel {
CardModel(this.value, this.height) {
inputValue = new InputValue(text: "Item $value");
}
int value;
double height;
int get color => ((value % 9) + 1) * 100;
InputValue inputValue;
Key get key => new ObjectKey(this);
}
class CardCollection extends StatefulWidget {
@override
CardCollectionState createState() => new CardCollectionState();
}
class CardCollectionState extends State<CardCollection> {
static const TextStyle cardLabelStyle =
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);
// TODO(hansmuller): need a local image asset
static const String _sunshineURL = "http://www.walltor.com/images/wallpaper/good-morning-sunshine-58540.jpg";
static const double kCardMargins = 8.0;
static const double kFixedCardHeight = 100.0;
final TextStyle backgroundTextStyle = Typography.white.title;
Map<int, Color> _primaryColor = Colors.deepPurple;
List<CardModel> _cardModels;
DismissDirection _dismissDirection = DismissDirection.horizontal;
TextAlign _textAlign = TextAlign.center;
bool _editable = false;
bool _snapToCenter = false;
bool _fixedSizeCards = false;
bool _sunshine = false;
bool _varyFontSizes = false;
void _initVariableSizedCardModels() {
List<double> cardHeights = <double>[
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0
];
_cardModels = new List<CardModel>.generate(
cardHeights.length,
(int i) => new CardModel(i, cardHeights[i])
);
}
void _initFixedSizedCardModels() {
const int cardCount = 27;
_cardModels = new List<CardModel>.generate(
cardCount,
(int i) => new CardModel(i, kFixedCardHeight)
);
}
void _initCardModels() {
if (_fixedSizeCards)
_initFixedSizedCardModels();
else
_initVariableSizedCardModels();
}
Iterable<int> get _cardIndices sync* {
for (int i = 0; i < _cardModels.length; i += 1)
yield i;
}
@override
void initState() {
super.initState();
_initCardModels();
}
double _variableSizeToSnapOffset(double scrollOffset) {
double cumulativeHeight = 0.0;
List<double> cumulativeHeights = _cardModels.map((CardModel card) {
cumulativeHeight += card.height + kCardMargins;
return cumulativeHeight;
})
.toList();
double offsetForIndex(int i) {
return (kCardMargins + _cardModels[i].height) / 2.0 + ((i == 0) ? 0.0 : cumulativeHeights[i - 1]);
}
for (int i = 0; i < cumulativeHeights.length; i++) {
if (cumulativeHeights[i] >= scrollOffset)
return offsetForIndex(i);
}
return offsetForIndex(cumulativeHeights.length - 1);
}
double _fixedSizeToSnapOffset(double scrollOffset) {
int cardIndex = (scrollOffset.clamp(0.0, kFixedCardHeight * (_cardModels.length - 1)) / kFixedCardHeight).floor();
return cardIndex * kFixedCardHeight + kFixedCardHeight * 0.5;
}
double _toSnapOffset(double scrollOffset, Size containerSize) {
double halfHeight = containerSize.height / 2.0;
scrollOffset += halfHeight;
double result = _fixedSizeCards ? _fixedSizeToSnapOffset(scrollOffset) : _variableSizeToSnapOffset(scrollOffset);
return result - halfHeight;
}
void dismissCard(CardModel card) {
if (_cardModels.contains(card)) {
setState(() {
_cardModels.remove(card);
});
}
}
Widget _buildDrawer() {
return new Drawer(
child: new IconTheme(
data: const IconThemeData(color: Colors.black),
child: new Block(children: <Widget>[
new DrawerHeader(content: new Center(child: new Text('Options'))),
buildDrawerCheckbox("Make card labels editable", _editable, _toggleEditable),
buildDrawerCheckbox("Snap fling scrolls to center", _snapToCenter, _toggleSnapToCenter),
buildDrawerCheckbox("Fixed size cards", _fixedSizeCards, _toggleFixedSizeCards),
buildDrawerCheckbox("Let the sun shine", _sunshine, _toggleSunshine),
buildDrawerCheckbox("Vary font sizes", _varyFontSizes, _toggleVaryFontSizes, enabled: !_editable),
new Divider(),
buildDrawerColorRadioItem("Deep Purple", Colors.deepPurple, _primaryColor, _selectColor),
buildDrawerColorRadioItem("Green", Colors.green, _primaryColor, _selectColor),
buildDrawerColorRadioItem("Amber", Colors.amber, _primaryColor, _selectColor),
buildDrawerColorRadioItem("Teal", Colors.teal, _primaryColor, _selectColor),
new Divider(),
buildDrawerDirectionRadioItem("Dismiss horizontally", DismissDirection.horizontal, _dismissDirection, _changeDismissDirection, icon: Icons.code),
buildDrawerDirectionRadioItem("Dismiss left", DismissDirection.endToStart, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_back),
buildDrawerDirectionRadioItem("Dismiss right", DismissDirection.startToEnd, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_forward),
new Divider(),
buildFontRadioItem("Left-align text", TextAlign.left, _textAlign, _changeTextAlign, icon: Icons.format_align_left, enabled: !_editable),
buildFontRadioItem("Center-align text", TextAlign.center, _textAlign, _changeTextAlign, icon: Icons.format_align_center, enabled: !_editable),
buildFontRadioItem("Right-align text", TextAlign.right, _textAlign, _changeTextAlign, icon: Icons.format_align_right, enabled: !_editable),
new Divider(),
new DrawerItem(
icon: Icons.dvr,
onPressed: () { debugDumpApp(); debugDumpRenderTree(); },
child: new Text('Dump App to Console')
),
])
)
);
}
String _dismissDirectionText(DismissDirection direction) {
String s = direction.toString();
return "dismiss ${s.substring(s.indexOf('.') + 1)}";
}
void _toggleEditable() {
setState(() {
_editable = !_editable;
});
}
void _toggleFixedSizeCards() {
setState(() {
_fixedSizeCards = !_fixedSizeCards;
_initCardModels();
});
}
void _toggleSnapToCenter() {
setState(() {
_snapToCenter = !_snapToCenter;
});
}
void _toggleSunshine() {
setState(() {
_sunshine = !_sunshine;
});
}
void _toggleVaryFontSizes() {
setState(() {
_varyFontSizes = !_varyFontSizes;
});
}
void _selectColor(Map<int, Color> selection) {
setState(() {
_primaryColor = selection;
});
}
void _changeDismissDirection(DismissDirection newDismissDirection) {
setState(() {
_dismissDirection = newDismissDirection;
});
}
void _changeTextAlign(TextAlign newTextAlign) {
setState(() {
_textAlign = newTextAlign;
});
}
Widget buildDrawerCheckbox(String label, bool value, void callback(), { bool enabled: true }) {
return new DrawerItem(
onPressed: enabled ? callback : null,
child: new Row(
children: <Widget>[
new Flexible(child: new Text(label)),
new Checkbox(
value: value,
onChanged: enabled ? (_) { callback(); } : null
)
]
)
);
}
Widget buildDrawerColorRadioItem(String label, Map<int, Color> itemValue, Map<int, Color> currentValue, ValueChanged<Map<int, Color>> onChanged, { IconData icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(
children: <Widget>[
new Flexible(child: new Text(label)),
new Radio<Map<int, Color>>(
value: itemValue,
groupValue: currentValue,
onChanged: enabled ? onChanged : null
)
]
)
);
}
Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged<DismissDirection> onChanged, { IconData icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(
children: <Widget>[
new Flexible(child: new Text(label)),
new Radio<DismissDirection>(
value: itemValue,
groupValue: currentValue,
onChanged: enabled ? onChanged : null
)
]
)
);
}
Widget buildFontRadioItem(String label, TextAlign itemValue, TextAlign currentValue, ValueChanged<TextAlign> onChanged, { IconData icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(
children: <Widget>[
new Flexible(child: new Text(label)),
new Radio<TextAlign>(
value: itemValue,
groupValue: currentValue,
onChanged: enabled ? onChanged : null
)
]
)
);
}
Widget _buildAppBar(BuildContext context) {
return new AppBar(
actions: <Widget>[
new Text(_dismissDirectionText(_dismissDirection))
],
flexibleSpace: new Container(
padding: const EdgeInsets.only(left: 72.0),
height: 128.0,
child: new Align(
alignment: const FractionalOffset(0.0, 0.75),
child: new Text('Swipe Away: ${_cardModels.length}', style: Theme.of(context).primaryTextTheme.title)
)
)
);
}
Widget _buildCard(BuildContext context, int index) {
if (index >= _cardModels.length)
return null;
CardModel cardModel = _cardModels[index];
Widget card = new Dismissable(
key: new ObjectKey(cardModel),
direction: _dismissDirection,
onDismissed: (DismissDirection direction) { dismissCard(cardModel); },
child: new Card(
color: _primaryColor[cardModel.color],
child: new Container(
height: cardModel.height,
padding: const EdgeInsets.all(kCardMargins),
child: _editable ?
new Center(
child: new Input(
key: new GlobalObjectKey(cardModel),
value: cardModel.inputValue,
onChanged: (InputValue value) {
setState(() {
cardModel.inputValue = value;
});
}
)
)
: new DefaultTextStyle.inherit(
context: context,
style: cardLabelStyle.copyWith(
fontSize: _varyFontSizes ? 5.0 + index : null
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(cardModel.inputValue.text, textAlign: _textAlign)
]
)
)
)
)
);
String backgroundMessage;
switch(_dismissDirection) {
case DismissDirection.horizontal:
backgroundMessage = "Swipe in either direction";
break;
case DismissDirection.endToStart:
backgroundMessage = "Swipe left to dismiss";
break;
case DismissDirection.startToEnd:
backgroundMessage = "Swipe right to dismiss";
break;
default:
backgroundMessage = "Unsupported dismissDirection";
}
// TODO(abarth): This icon is wrong in RTL.
Widget leftArrowIcon = new Icon(icon: Icons.arrow_back, size: 36.0);
if (_dismissDirection == DismissDirection.startToEnd)
leftArrowIcon = new Opacity(opacity: 0.1, child: leftArrowIcon);
// TODO(abarth): This icon is wrong in RTL.
Widget rightArrowIcon = new Icon(icon: Icons.arrow_forward, size: 36.0);
if (_dismissDirection == DismissDirection.endToStart)
rightArrowIcon = new Opacity(opacity: 0.1, child: rightArrowIcon);
// The background Widget appears behind the Dismissable card when the card
// moves to the left or right. The Positioned widget ensures that the
// size of the background,card Stack will be based only on the card. The
// Viewport ensures that when the card's resize animation occurs, the
// background (text and icons) will just be clipped, not resized.
Widget background = new Positioned(
top: 0.0,
right: 0.0,
bottom: 0.0,
left: 0.0,
child: new Container(
margin: const EdgeInsets.all(4.0),
child: new Viewport(
child: new Container(
height: cardModel.height,
decoration: new BoxDecoration(backgroundColor: Theme.of(context).primaryColor),
child: new Row(
children: <Widget>[
leftArrowIcon,
new Flexible(
child: new Text(backgroundMessage,
style: backgroundTextStyle,
textAlign: TextAlign.center
)
),
rightArrowIcon
]
)
)
)
)
);
return new IconTheme(
key: cardModel.key,
data: const IconThemeData(color: Colors.white),
child: new Stack(children: <Widget>[background, card])
);
}
Shader _createShader(Rect bounds) {
return new LinearGradient(
begin: FractionalOffset.topLeft,
end: FractionalOffset.bottomLeft,
colors: <Color>[const Color(0x00FFFFFF), const Color(0xFFFFFFFF)],
stops: <double>[0.1, 0.35]
)
.createShader(bounds);
}
@override
Widget build(BuildContext context) {
Widget cardCollection;
if (_fixedSizeCards) {
cardCollection = new ScrollableList(
snapOffsetCallback: _snapToCenter ? _toSnapOffset : null,
itemExtent: kFixedCardHeight,
children: _cardIndices.map/*<Widget>*/((int index) => _buildCard(context, index))
);
} else {
cardCollection = new LazyBlock(
delegate: new LazyBlockBuilder(builder: _buildCard),
snapOffsetCallback: _snapToCenter ? _toSnapOffset : null
);
}
if (_sunshine) {
cardCollection = new Stack(
children: <Widget>[
new Column(children: <Widget>[new NetworkImage(src: _sunshineURL)]),
new ShaderMask(child: cardCollection, shaderCallback: _createShader)
]
);
}
Widget body = new Container(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
decoration: new BoxDecoration(backgroundColor: _primaryColor[50]),
child: cardCollection
);
if (_snapToCenter) {
Widget indicator = new IgnorePointer(
child: new Align(
alignment: FractionalOffset.centerLeft,
child: new Container(
height: 1.0,
decoration: new BoxDecoration(backgroundColor: const Color(0x80FFFFFF))
)
)
);
body = new Stack(children: <Widget>[body, indicator]);
}
return new Theme(
data: new ThemeData(
primarySwatch: _primaryColor
),
child: new Scaffold(
appBar: _buildAppBar(context),
drawer: _buildDrawer(),
body: body
)
);
}
}
void main() {
runApp(new MaterialApp(
title: 'Cards',
home: new CardCollection()
));
}