Use a card for the stock symbol viewer page.

examples/stocks/lib/stock_home.dart

@@ -186,13 +186,13 @@ class StockHomeState extends State<StockHome> {
   Widget buildStockList(BuildContext context, Iterable<Stock> stocks) {
     return new StockList(
       stocks: stocks.toList(),
-      onAction: (Stock stock, GlobalKey row, GlobalKey arrowKey, GlobalKey symbolKey, GlobalKey priceKey) {
+      onAction: (Stock stock, GlobalKey arrowKey) {
         setState(() {
           stock.percentChange = 100.0 * (1.0 / stock.lastSale);
           stock.lastSale += 1.0;
         });
       },
-      onOpen: (Stock stock, GlobalKey row, GlobalKey arrowKey, GlobalKey symbolKey, GlobalKey priceKey) {
+      onOpen: (Stock stock, GlobalKey arrowKey) {
         config.navigator.pushNamed('/stock/${stock.symbol}');
       }
     );

examples/stocks/lib/stock_row.dart

@@ -4,24 +4,24 @@
 
 part of stocks;
 
-enum StockRowPartKind { arrow, symbol, price }
+enum StockRowPartKind { arrow }
 
-class StockRowPartGlobalKey extends GlobalKey {
-  const StockRowPartGlobalKey(this.stock, this.part) : super.constructor();
+class StockRowPartKey extends GlobalKey {
+  const StockRowPartKey(this.stock, this.part) : super.constructor();
   final Stock stock;
   final StockRowPartKind part;
   bool operator ==(dynamic other) {
-    if (other is! StockRowPartGlobalKey)
+    if (other is! StockRowPartKey)
       return false;
-    final StockRowPartGlobalKey typedOther = other;
+    final StockRowPartKey typedOther = other;
     return stock == typedOther.stock &&
            part == typedOther.part;
   }
   int get hashCode => 37 * (37 * (373) + identityHashCode(stock)) + identityHashCode(part);
-  String toString() => '[StockRowPartGlobalKey ${stock.symbol}:${part.toString().split(".")[1]})]';
+  String toString() => '[StockRowPartKey ${stock.symbol}:${part.toString().split(".")[1]})]';
 }
 
-typedef void StockRowActionCallback(Stock stock, GlobalKey row, GlobalKey arrowKey, GlobalKey symbolKey, GlobalKey priceKey);
+typedef void StockRowActionCallback(Stock stock, GlobalKey arrowKey);
 
 class StockRow extends StatelessComponent {
   StockRow({
@@ -29,38 +29,34 @@ class StockRow extends StatelessComponent {
     this.onPressed,
     this.onLongPressed
   }) : this.stock = stock,
-       arrowKey = new StockRowPartGlobalKey(stock, StockRowPartKind.arrow),
-       symbolKey = new StockRowPartGlobalKey(stock, StockRowPartKind.symbol),
-       priceKey = new StockRowPartGlobalKey(stock, StockRowPartKind.price),
+       _arrowKey = new StockRowPartKey(stock, StockRowPartKind.arrow),
        super(key: new GlobalObjectKey(stock));
 
   final Stock stock;
   final StockRowActionCallback onPressed;
   final StockRowActionCallback onLongPressed;
-  final GlobalKey arrowKey;
-  final GlobalKey symbolKey;
-  final GlobalKey priceKey;
+
+  final Key _arrowKey;
 
   static const double kHeight = 79.0;
 
   GestureTapCallback _getTapHandler(StockRowActionCallback callback) {
     if (callback == null)
       return null;
-    return () => callback(stock, key, arrowKey, symbolKey, priceKey);
+    return () => callback(stock, _arrowKey);
   }
 
   GestureLongPressCallback _getLongPressHandler(StockRowActionCallback callback) {
     if (callback == null)
       return null;
-    return () => callback(stock, key, arrowKey, symbolKey, priceKey);
+    return () => callback(stock, _arrowKey);
   }
 
   Widget build(BuildContext context) {
     String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
-
     String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
-    if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
-
+    if (stock.percentChange > 0)
+      changeInPrice = "+" + changeInPrice;
     return new InkWell(
       onTap: _getTapHandler(onPressed),
       onLongPress: _getLongPressHandler(onLongPressed),
@@ -72,39 +68,38 @@ class StockRow extends StatelessComponent {
           )
         ),
         child: new Row(<Widget>[
-          new Container(
-            key: arrowKey,
-            child: new StockArrow(percentChange: stock.percentChange),
-            margin: const EdgeDims.only(right: 5.0)
-          ),
-          new Flexible(
-            child: new Row(<Widget>[
-                new Flexible(
-                  flex: 2,
-                  child: new Text(
-                    stock.symbol,
-                    key: symbolKey
-                  )
-                ),
-                new Flexible(
-                  child: new Text(
-                    lastSale,
-                    style: const TextStyle(textAlign: TextAlign.right),
-                    key: priceKey
-                  )
-                ),
-                new Flexible(
-                  child: new Text(
-                    changeInPrice,
-                    style: Theme.of(context).text.caption.copyWith(textAlign: TextAlign.right)
-                  )
-                ),
-              ],
-              alignItems: FlexAlignItems.baseline,
-              textBaseline: DefaultTextStyle.of(context).textBaseline
-            )
-          )
-        ])
+            new Container(
+              key: _arrowKey,
+              child: new StockArrow(percentChange: stock.percentChange),
+              margin: const EdgeDims.only(right: 5.0)
+            ),
+            new Flexible(
+              child: new Row(<Widget>[
+                  new Flexible(
+                    flex: 2,
+                    child: new Text(
+                      stock.symbol
+                    )
+                  ),
+                  new Flexible(
+                    child: new Text(
+                      lastSale,
+                      style: const TextStyle(textAlign: TextAlign.right)
+                    )
+                  ),
+                  new Flexible(
+                    child: new Text(
+                      changeInPrice,
+                      style: const TextStyle(textAlign: TextAlign.right)
+                    )
+                  ),
+                ],
+                alignItems: FlexAlignItems.baseline,
+                textBaseline: DefaultTextStyle.of(context).textBaseline
+              )
+            ),
+          ]
+        )
       )
     );
   }

examples/stocks/lib/stock_symbol_viewer.dart

@@ -4,49 +4,53 @@
 
 part of stocks;
 
-class StockSymbolViewer extends StatefulComponent {
+class StockSymbolViewer extends StatelessComponent {
   StockSymbolViewer(this.navigator, this.stock);
 
   final NavigatorState navigator;
   final Stock stock;
 
-  StockSymbolViewerState createState() => new StockSymbolViewerState();
-}
-
-class StockSymbolViewerState extends State<StockSymbolViewer> {
-
   Widget build(BuildContext context) {
-
-    String lastSale = "\$${config.stock.lastSale.toStringAsFixed(2)}";
-
-    String changeInPrice = "${config.stock.percentChange.toStringAsFixed(2)}%";
-    if (config.stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
-
+    String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
+    String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
+    if (stock.percentChange > 0)
+      changeInPrice = "+" + changeInPrice;
     TextStyle headings = Theme.of(context).text.body2;
-
     return new Scaffold(
       toolBar: new ToolBar(
         left: new IconButton(
           icon: 'navigation/arrow_back',
-          onPressed: config.navigator.pop
+          onPressed: navigator.pop
         ),
-        center: new Text('${config.stock.name} (${config.stock.symbol})')
+        center: new Text(stock.name)
       ),
       body: new Block(<Widget>[
-        new Container(
-          padding: new EdgeDims.all(20.0),
-          child: new Column(<Widget>[
-              new Text('Last Sale', style: headings),
-              new Text('$lastSale ($changeInPrice)'),
-              new Container(
-                height: 8.0
-              ),
-              new Text('Market Cap', style: headings),
-              new Text('${config.stock.marketCap}'),
-            ],
-            alignItems: FlexAlignItems.stretch
+          new Container(
+            margin: new EdgeDims.all(20.0),
+            child: new Card(
+              child: new Container(
+                padding: new EdgeDims.all(20.0),
+                child: new Column(<Widget>[
+                    new Row(<Widget>[
+                      new Text(
+                        '${stock.symbol}',
+                        style: Theme.of(context).text.display2
+                      ),
+                      new StockArrow(percentChange: stock.percentChange)
+                    ],
+                    justifyContent: FlexJustifyContent.spaceBetween
+                  ),
+                  new Text('Last Sale', style: headings),
+                  new Text('$lastSale ($changeInPrice)'),
+                  new Container(
+                    height: 8.0
+                  ),
+                  new Text('Market Cap', style: headings),
+                  new Text('${stock.marketCap}'),
+                ])
+              )
+            )
           )
-        )
       ])
     );
   }