stock2 should actually show some stocks data

We're having trouble shrinkwrapping text, so this CL sets an explicit size for
the last sale and the change in price.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1164763006

examples/stocks2/lib/stock_row.dart

@@ -7,31 +7,11 @@ import 'package:sky/framework/components2/ink_well.dart';
 import 'package:sky/framework/fn2.dart';
 import 'package:sky/framework/rendering/box.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
-import 'stock_arrow.dart';
+// import 'stock_arrow.dart';
 import 'stock_data.dart';
 
 class StockRow extends Component {
   static const double kHeight = 100.0;
-  // 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;
-
-  // static final Style _lastSaleStyle = new Style('''
-  //   text-align: right;
-  //   padding-right: 16px;'''
-  // );
-
-  // static final Style _changeStyle = new Style('''
-  //   ${typography.black.caption};
-  //   text-align: right;'''
-  // );
 
   Stock stock;
 
@@ -40,43 +20,39 @@ class StockRow extends Component {
   }
 
   UINode build() {
-    // String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
+    String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
 
-    // String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
-    // if (stock.percentChange > 0)
-    //   changeInPrice = "+" + changeInPrice;
+    String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
+    if (stock.percentChange > 0)
+      changeInPrice = "+" + changeInPrice;
 
-    // List<UINode> children = [
+    List<UINode> children = [
       // new StockArrow(
       //   percentChange: stock.percentChange
       // ),
-    //   new ParentDataNode(
-    //     new Container(
-    //       key: 'Ticker',
-    //       children: [new Text(stock.symbol)]
-    //     ),
-    //     _tickerFlex
-    //   ),
-    //   new Container(
-    //     key: 'LastSale',
-    //     style: _lastSaleStyle,
-    //     children: [new Text(lastSale)]
-    //   ),
-    //   new Container(
-    //     key: 'Change',
-    //     style: _changeStyle,
-    //     children: [new Text(changeInPrice)]
-    //   )
-    // ];
+      new FlexExpandingChild(new Text(stock.symbol)),
+      new Container(
+        desiredSize: const sky.Size.fromWidth(75.0),
+        padding: const EdgeDims.only(right: 16.0),
+        // text-align: right
+        child: new Text(lastSale)
+      ),
+      // text-align: right, ${typography.black.caption};
+      new SizedBox(
+        desiredSize: const sky.Size.fromWidth(75.0),
+        child: new Text(changeInPrice)
+      ),
+    ];
 
-    // return new StyleNode(new InkWell(children: children), _style);
     return new Container(
+      padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
       desiredSize: const sky.Size.fromHeight(kHeight),
       decoration: const BoxDecoration(
         backgroundColor: const sky.Color(0xFFFFFFFF),
         border: const Border(
           bottom: const BorderSide(
             color: const sky.Color(0xFFF4F4F4),
-            width: 1.0))));
+            width: 1.0))),
+      child: new FlexContainer(children: children));
   }
 }