OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 import '../animation/animated_value.dart'; | 5 import '../animation/animated_value.dart'; |
6 import '../painting/box_painter.dart'; | 6 import '../painting/box_painter.dart'; |
7 import '../theme/edges.dart'; | |
8 import '../theme/shadows.dart'; | 7 import '../theme/shadows.dart'; |
9 import 'animated_component.dart'; | 8 import 'animated_component.dart'; |
10 import 'basic.dart'; | 9 import 'basic.dart'; |
11 import 'default_text_style.dart'; | 10 import 'default_text_style.dart'; |
12 import 'theme.dart'; | 11 import 'theme.dart'; |
13 | 12 |
14 export '../theme/edges.dart' show MaterialEdge; | 13 enum MaterialType { canvas, card, circle, button } |
| 14 |
| 15 const Map<MaterialType, double> edges = const { |
| 16 MaterialType.canvas: null, |
| 17 MaterialType.card: 2.0, |
| 18 MaterialType.circle: null, |
| 19 MaterialType.button: 2.0, |
| 20 }; |
15 | 21 |
16 const double _kAnimateShadowDurationMS = 100.0; | 22 const double _kAnimateShadowDurationMS = 100.0; |
17 | 23 |
18 List<BoxShadow> _computeShadow(double level) { | 24 List<BoxShadow> _computeShadow(double level) { |
19 if (level < 1.0) // shadows[1] is the first shadow | 25 if (level < 1.0) // shadows[1] is the first shadow |
20 return null; | 26 return null; |
21 | 27 |
22 int level1 = level.floor(); | 28 int level1 = level.floor(); |
23 int level2 = level.ceil(); | 29 int level2 = level.ceil(); |
24 double t = level - level1.toDouble(); | 30 double t = level - level1.toDouble(); |
25 | 31 |
26 List<BoxShadow> shadow = new List<BoxShadow>(); | 32 List<BoxShadow> shadow = new List<BoxShadow>(); |
27 for (int i = 0; i < shadows[level1].length; ++i) | 33 for (int i = 0; i < shadows[level1].length; ++i) |
28 shadow.add(lerpBoxShadow(shadows[level1][i], shadows[level2][i], t)); | 34 shadow.add(lerpBoxShadow(shadows[level1][i], shadows[level2][i], t)); |
29 return shadow; | 35 return shadow; |
30 } | 36 } |
31 | 37 |
32 class Material extends AnimatedComponent { | 38 class Material extends AnimatedComponent { |
33 | 39 |
34 Material({ | 40 Material({ |
35 String key, | 41 String key, |
36 this.child, | 42 this.child, |
37 this.edge: MaterialEdge.card, | 43 this.type: MaterialType.card, |
38 int level: 0, | 44 int level: 0, |
39 this.color | 45 this.color |
40 }) : super(key: key) { | 46 }) : super(key: key) { |
41 this.level = new AnimatedValue(level == null ? 0.0 : level.toDouble()); | 47 this.level = new AnimatedValue(level == null ? 0.0 : level.toDouble()); |
42 watch(this.level); | 48 watch(this.level); |
43 } | 49 } |
44 | 50 |
45 Widget child; | 51 Widget child; |
46 MaterialEdge edge; | 52 MaterialType type; |
47 AnimatedValue level; | 53 AnimatedValue level; |
48 Color color; | 54 Color color; |
49 | 55 |
50 void syncFields(Material source) { | 56 void syncFields(Material source) { |
51 child = source.child; | 57 child = source.child; |
52 edge = source.edge; | 58 type = source.type; |
53 // TODO(mpcomplete): duration is wrong, because the current level may be | 59 // TODO(mpcomplete): duration is wrong, because the current level may be |
54 // anything. We really want |rate|. | 60 // anything. We really want |rate|. |
55 if (level.value != source.level.value) | 61 if (level.value != source.level.value) |
56 level.animateTo(source.level.value.toDouble(), _kAnimateShadowDurationMS); | 62 level.animateTo(source.level.value.toDouble(), _kAnimateShadowDurationMS); |
57 color = source.color; | 63 color = source.color; |
58 super.syncFields(source); | 64 super.syncFields(source); |
59 } | 65 } |
60 | 66 |
| 67 Color get backgroundColor { |
| 68 if (color != null) |
| 69 return color; |
| 70 switch(type) { |
| 71 case MaterialType.canvas: |
| 72 return Theme.of(this).canvasColor; |
| 73 case MaterialType.card: |
| 74 return Theme.of(this).cardColor; |
| 75 default: |
| 76 return null; |
| 77 } |
| 78 } |
| 79 |
61 // TODO(mpcomplete): make this animate color changes. | 80 // TODO(mpcomplete): make this animate color changes. |
62 | 81 |
63 Widget build() { | 82 Widget build() { |
64 return new Container( | 83 return new Container( |
65 decoration: new BoxDecoration( | 84 decoration: new BoxDecoration( |
66 boxShadow: _computeShadow(level.value), | 85 boxShadow: _computeShadow(level.value), |
67 borderRadius: edges[edge], | 86 borderRadius: edges[type], |
68 backgroundColor: color, | 87 backgroundColor: backgroundColor, |
69 shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle | 88 shape: type == MaterialType.circle ? Shape.circle : Shape.rectangle |
70 ), | 89 ), |
71 child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child
) | 90 child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child
) |
72 ); | 91 ); |
73 } | 92 } |
74 | 93 |
75 } | 94 } |
OLD | NEW |