OLD | NEW |
1 part of widgets; | 1 part of widgets; |
2 | 2 |
3 class FloatingActionButton extends StyleComponent { | 3 class FloatingActionButton extends MaterialComponent { |
4 | |
5 // TODO(rafaelw): Ganesh has problems with box shadows | 4 // TODO(rafaelw): Ganesh has problems with box shadows |
6 // box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | 5 // box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); |
7 | 6 |
8 static final Style _style = new Style(''' | 7 static final Style _style = new Style(''' |
9 position: absolute; | 8 position: absolute; |
10 display: flex; | |
11 justify-content: center; | |
12 align-items: center; | |
13 bottom: 16px; | 9 bottom: 16px; |
14 right: 16px; | 10 right: 16px; |
| 11 z-index: 5; |
| 12 transform: translateX(0); |
15 width: 56px; | 13 width: 56px; |
16 height: 56px; | 14 height: 56px; |
17 background-color: #F44336; | 15 background-color: #F44336; |
18 color: white; | 16 color: white; |
19 border-radius: 28px;''' | 17 border-radius: 28px;''' |
20 ); | 18 ); |
| 19 static final Style _clipStyle = new Style(''' |
| 20 transform: translateX(0); |
| 21 position: absolute; |
| 22 display: flex; |
| 23 justify-content: center; |
| 24 align-items: center; |
| 25 top: 0; |
| 26 left: 0; |
| 27 right: 0; |
| 28 bottom: 0; |
| 29 -webkit-clip-path: circle(28px at center);'''); |
21 | 30 |
22 Style get style => _style; | 31 Node content; |
23 | 32 |
24 FloatingActionButton({ Object key, Node content }) : super(key: key, content:
content); | 33 FloatingActionButton({ Object key, this.content }) : super(key: key); |
| 34 |
| 35 Node render() { |
| 36 List<Node> children = [super.render()]; |
| 37 |
| 38 if (content != null) |
| 39 children.add(content); |
| 40 |
| 41 return new Container( |
| 42 key: "Container", |
| 43 style: _style, |
| 44 children: [ |
| 45 new Container( |
| 46 key: "Clip", |
| 47 style: _clipStyle, |
| 48 children: children |
| 49 ) |
| 50 ] |
| 51 ); |
| 52 } |
25 } | 53 } |
OLD | NEW |