Cleanup sky/sdk/examples

sky/sdk/example/stocks/lib/stock_row.dart

 // 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:sky/framework/components/ink_well.dart';
-import 'package:sky/framework/fn.dart';
-import 'package:sky/framework/layout.dart';
-import 'package:sky/framework/theme/typography.dart' as typography;
+import 'package:sky/painting/text_style.dart';
+import 'package:sky/rendering/box.dart';
+import 'package:sky/widgets/ink_well.dart';
+import 'package:sky/widgets/basic.dart';
+import 'package:sky/widgets/theme.dart';
+
 import 'stock_arrow.dart';
 import 'stock_data.dart';
 
 class StockRow extends Component {
-  static final Style _style = new Style('''
-    align-items: center;
-    border-bottom: 1px solid #F4F4F4;
-    padding-top: 16px;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-bottom: 20px;'''
-  );
 
-  static final FlexBoxParentData _tickerFlex = new FlexBoxParentData()..flex = 1;
+  StockRow({ Stock stock }) : this.stock = stock, super(key: stock.symbol);
 
-  static final Style _lastSaleStyle = new Style('''
-    text-align: right;
-    padding-right: 16px;'''
-  );
+  final Stock stock;
 
-  static final Style _changeStyle = new Style('''
-    ${typography.black.caption};
-    text-align: right;'''
-  );
+  static const double kHeight = 79.0;
 
-  Stock stock;
-
-  StockRow({Stock stock}) : super(key: stock.symbol) {
-    this.stock = stock;
-  }
-
-  UINode build() {
+  Widget build() {
     String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
 
     String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
-    if (stock.percentChange > 0)
-      changeInPrice = "+" + changeInPrice;
+    if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
 
-    List<UINode> children = [
-      new StockArrow(
-        percentChange: stock.percentChange
+    List<Widget> children = [
+      new Container(
+        child: new StockArrow(percentChange: stock.percentChange),
+        margin: const EdgeDims.only(right: 5.0)
       ),
-      new ParentDataNode(
-        new Container(
-          key: 'Ticker',
-          children: [new Text(stock.symbol)]
-        ),
-        _tickerFlex
+      new Flexible(
+        child: new Text(stock.symbol),
+        flex: 2
       ),
-      new Container(
-        key: 'LastSale',
-        style: _lastSaleStyle,
-        children: [new Text(lastSale)]
+      new Flexible(
+        child: new Text(
+          lastSale,
+          style: const TextStyle(textAlign: TextAlign.right)
+        )
       ),
-      new Container(
-        key: 'Change',
-        style: _changeStyle,
-        children: [new Text(changeInPrice)]
+      new Flexible(
+        child: new Text(
+          changeInPrice,
+          style: Theme.of(this).text.caption.copyWith(textAlign: TextAlign.right)
+        )
       )
     ];
 
-    return new StyleNode(new InkWell(children: children), _style);
+    // TODO(hansmuller): An explicit |height| shouldn't be needed
+    return new InkWell(
+      child: new Container(
+        padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
+        height: kHeight,
+        decoration: const BoxDecoration(
+            border: const Border(
+                bottom: const BorderSide(color: const Color(0xFFF4F4F4)))),
+        child: new Flex(children)
+      )
+    );
   }
 }