firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement a floating action button in fn

Browse Source 
R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/975913002
This commit is contained in:
Adam Barth 2015-03-03 14:05:02 -08:00
parent de7f8a9c2b
commit 3c5df69a2b
5 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/fn/widgets/floating_action_button.dart Normal file
View File

@ -0,0 +1,22 @@
part of widgets;
class FloatingActionButton extends StyleComponent {
static final Style _style = new Style('''
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 16px;
right: 16px;
width: 56px;
height: 56px;
background-color: #F44336;
color: white;
border-radius: 28px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);'''
);
Style get style => _style;
FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
}

17
examples/fn/widgets/style_component.dart Normal file
View File

@ -0,0 +1,17 @@
part of widgets;
abstract class StyleComponent extends Component {
Node content;
// Subclasses should implement this getter to provide their style information.
Style get style => null;
StyleComponent({ Object key, this.content }) : super(key: key);
Node render() {
return new Container(
style: style,
children: content == null ? [] : [content]
);
}
}

2
examples/fn/widgets/toolbar.dart
View File

@ -4,7 +4,7 @@ class Toolbar extends Component {
List<Node> children;
static Style _style = new Style('''
static final Style _style = new Style('''
display: flex;
align-items: center;
height: 84px;

2
examples/fn/widgets/widgets.dart
View File

@ -20,5 +20,7 @@ part 'menudivider.dart';
part 'menuitem.dart';
part 'radio.dart';
part 'toolbar.dart';
part 'floating_action_button.dart';
part 'style_component.dart';
typedef void ValueChanged(value);

12
examples/stocks-fn/stocksapp.dart
View File

@ -92,10 +92,20 @@ class StocksApp extends App {
]
);
var fab = new FloatingActionButton(content: new Icon(
type: 'content/add_white', size: 24));
return new Container(
key: 'StocksApp',
children: [
new Container(
key: 'Content',
style: _style,
children: [drawer, toolbar, new Stocklist(stocks: oracle.stocks)]
children: [toolbar, new Stocklist(stocks: oracle.stocks)]
),
fab,
drawer,
]
);
}
}