Vertically center stock demo row contents, better up/down arrows

StockRows are now a relatively simple application of flex layout.

The up/down arrows are now rendered within a circle, like
the original version. The arrows are a little bigger,
because.

R=ianh@google.com

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

examples/stocks2/lib/stock_arrow.dart

@@ -34,25 +34,37 @@ class StockArrow extends Component {
     const double size = 40.0;
     var arrow = new CustomPaint(callback: (sky.Canvas canvas) {
       Paint paint = new Paint()..color = color;
-      paint.setStyle(sky.PaintingStyle.stroke);
-      paint.strokeWidth = 2.0;
+      paint.strokeWidth = 1.0;
       var padding = paint.strokeWidth * 3.0;
-      var w = size - padding * 2.0;
-      var h = size - padding * 2.0;
+      var r = size / 2.0 - padding;
       canvas.save();
       canvas.translate(padding, padding);
+
+      // The arrow (below) is drawn upwards by default.
       if (percentChange < 0.0) {
-        var cx = w / 2.0;
-        var cy = h / 2.0;
-        canvas.translate(cx, cy);
+        canvas.translate(r, r);
         canvas.rotate(math.PI);
-        canvas.translate(-cx, -cy);
+        canvas.translate(-r, -r);
       }
-      canvas.drawLine(0.0, h, w, h, paint);
-      canvas.drawLine(w, h, w / 2.0, 0.0, paint);
-      canvas.drawLine(w / 2.0, 0.0, 0.0, h, paint);
+
+      // Draw the (equliateral triangle) arrow.
+      var dx = math.sqrt(3.0) * r / 2.0;
+      var path = new Path();
+      path.moveTo(r, 0.0);
+      path.lineTo(r + dx, r * 1.5);
+      path.lineTo(r - dx, r * 1.5);
+      path.lineTo(r, 0.0);
+      path.close();
+      paint.setStyle(sky.PaintingStyle.fill);
+      canvas.drawPath(path, paint);
+
+      // Draw a circle that circumscribes the arrow.
+      paint.setStyle(sky.PaintingStyle.stroke);
+      canvas.drawCircle(r, r, r + 2.0, paint);
+
       canvas.restore();
     });
+
     return new Container(
         child: arrow,
         width: size,

examples/stocks2/lib/stock_row.dart

@@ -5,13 +5,14 @@
 import 'dart:sky' as sky;
 import 'package:sky/framework/components2/ink_well.dart';
 import 'package:sky/framework/fn2.dart';
+import 'package:sky/framework/rendering/flex.dart';
 import 'package:sky/framework/rendering/box.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'stock_arrow.dart';
 import 'stock_data.dart';
 
 class StockRow extends Component {
-  static const double kHeight = 100.0;
+  static const double kHeight = 70.0;
 
   Stock stock;
 
@@ -23,36 +24,28 @@ class StockRow extends Component {
     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
-      ),
-      new FlexExpandingChild(new Text(stock.symbol)),
       new Container(
-        width: 75.0,
-        padding: const EdgeDims.only(right: 16.0),
-        // text-align: right
-        child: new Text(lastSale)
-      ),
-      // text-align: right, ${typography.black.caption};
-      new SizedBox(
-        width: 75.0,
-        child: new Text(changeInPrice)
-      ),
+          child: new StockArrow(percentChange: stock.percentChange),
+          margin: const EdgeDims.only(right: 5.0)),
+      new FlexExpandingChild(new Text(stock.symbol), flex: 2, key: "symbol"),
+      // TODO(hansmuller): text-align: right
+      new FlexExpandingChild(new Text(lastSale), key: "lastSale"),
+      // TODO(hansmuller): text-align: right, ${typography.black.caption};
+      new FlexExpandingChild(new Text(changeInPrice), key: "changeInPrice")
     ];
 
     return new Container(
       padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
-      height: kHeight,
+      height: kHeight, // TODO(hansmuller): This shouldn't be needed
       decoration: const BoxDecoration(
-        backgroundColor: const sky.Color(0xFFFFFFFF),
-        border: const Border(
-          bottom: const BorderSide(
-            color: const sky.Color(0xFFF4F4F4),
-            width: 1.0))),
+          backgroundColor: const sky.Color(0xFFFFFFFF),
+          border: const Border(
+              bottom: const BorderSide(
+                  color: const sky.Color(0xFFF4F4F4),
+                  width: 1.0))),
       child: new FlexContainer(children: children));
   }
 }