Merge pull request #1403 from Hixie/clickable-stocks

Make Stocks demo list rows clickable

examples/stocks/lib/main.dart

@@ -9,6 +9,7 @@ import 'dart:math' as math;
 import 'dart:sky' as sky;
 
 import 'package:sky/animation.dart';
+import 'package:sky/gestures.dart';
 import 'package:sky/material.dart';
 import 'package:sky/painting.dart';
 import 'package:sky/src/fn3.dart';

examples/stocks/lib/stock_home.dart

@@ -183,27 +183,30 @@ class StockHomeState extends State<StockHome> {
     return stocks.where((stock) => stock.symbol.contains(regexp));
   }
 
-  Widget buildMarketStockList(BuildContext context) {
-    return new Stocklist(stocks: _filterBySearchQuery(config.stocks).toList());
-  }
-
-  Widget buildPortfolioStocklist(BuildContext context) {
-    return new Stocklist(stocks: _filterBySearchQuery(_filterByPortfolio(config.stocks)).toList());
+  Widget buildStockList(BuildContext context, Iterable<Stock> stocks) {
+    return new StockList(
+      stocks: stocks.toList(),
+      onAction: (Stock stock) {
+        setState(() {
+          stock.percentChange = 100.0 * (1.0 / stock.lastSale);
+          stock.lastSale += 1.0;
+        });
+      }
+    );
   }
 
   Widget buildTabNavigator() {
-    List<TabNavigatorView> views = <TabNavigatorView>[
-      new TabNavigatorView(
-        label: const TabLabel(text: 'MARKET'),
-        builder: buildMarketStockList
-      ),
-      new TabNavigatorView(
-        label: const TabLabel(text: 'PORTFOLIO'),
-        builder: buildPortfolioStocklist
-      )
-    ];
     return new TabNavigator(
-      views: views,
+      views: <TabNavigatorView>[
+        new TabNavigatorView(
+          label: const TabLabel(text: 'MARKET'),
+          builder: (BuildContext context) => buildStockList(context, _filterBySearchQuery(config.stocks))
+        ),
+        new TabNavigatorView(
+          label: const TabLabel(text: 'PORTFOLIO'),
+          builder: (BuildContext context) => buildStockList(context, _filterByPortfolio(config.stocks))
+        )
+      ],
       selectedIndex: selectedTabIndex,
       onChanged: (tabIndex) {
         setState(() { selectedTabIndex = tabIndex; } );

examples/stocks/lib/stock_list.dart

@@ -4,10 +4,13 @@
 
 part of stocks;
 
-class Stocklist extends StatelessComponent {
-  Stocklist({ Key key, this.stocks }) : super(key: key);
+typedef void StockActionListener(Stock stock);
+
+class StockList extends StatelessComponent {
+  StockList({ Key key, this.stocks, this.onAction }) : super(key: key);
 
   final List<Stock> stocks;
+  final StockActionListener onAction;
 
   Widget build(BuildContext context) {
     return new Material(
@@ -15,7 +18,12 @@ class Stocklist extends StatelessComponent {
       child: new ScrollableList<Stock>(
         items: stocks,
         itemExtent: StockRow.kHeight,
-        itemBuilder: (BuildContext context, Stock stock) => new StockRow(stock: stock)
+        itemBuilder: (BuildContext context, Stock stock) {
+          return new StockRow(
+            stock: stock,
+            onPressed: () { onAction(stock); }
+          );
+        }
       )
     );
   }

examples/stocks/lib/stock_row.dart

@@ -5,9 +5,10 @@
 part of stocks;
 
 class StockRow extends StatelessComponent {
-  StockRow({ Stock stock }) : this.stock = stock, super(key: new Key(stock.symbol));
+  StockRow({ Stock stock, this.onPressed }) : this.stock = stock, super(key: new Key(stock.symbol));
 
   final Stock stock;
+  final GestureTapListener onPressed;
 
   static const double kHeight = 79.0;
 
@@ -36,28 +37,31 @@ class StockRow extends StatelessComponent {
       )
     ];
 
-    // TODO(hansmuller): An explicit |height| shouldn't be needed
-    return new Container(
-      padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
-      height: kHeight,
-      decoration: new BoxDecoration(
-        border: new Border(
-          bottom: new BorderSide(color: Theme.of(context).dividerColor)
+    return new GestureDetector(
+      onTap: onPressed,
+      child: new InkWell(
+        child: new Container(
+          padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
+          decoration: new BoxDecoration(
+            border: new Border(
+              bottom: new BorderSide(color: Theme.of(context).dividerColor)
+            )
+          ),
+          child: new Row([
+            new Container(
+              child: new StockArrow(percentChange: stock.percentChange),
+              margin: const EdgeDims.only(right: 5.0)
+            ),
+            new Flexible(
+              child: new Row(
+                children,
+                alignItems: FlexAlignItems.baseline,
+                textBaseline: DefaultTextStyle.of(context).textBaseline
+              )
+            )
+          ])
         )
-      ),
-      child: new Row([
-        new Container(
-          child: new StockArrow(percentChange: stock.percentChange),
-          margin: const EdgeDims.only(right: 5.0)
-        ),
-        new Flexible(
-          child: new Row(
-            children,
-            alignItems: FlexAlignItems.baseline,
-            textBaseline: DefaultTextStyle.of(context).textBaseline
-          )
-        )
-      ])
+      )
     );
   }
 }

packages/flutter/lib/src/fn3/tabs.dart

@@ -572,17 +572,16 @@ class TabBarState extends ScrollableState<TabBar> {
 }
 
 class TabNavigatorView {
-  TabNavigatorView({ this.label, this.builder });
+  TabNavigatorView({ this.label, this.builder }) {
+    assert(builder != null);
+  }
+
+  // this uses a builder for the contents, rather than a raw Widget child,
+  // because there might be many, many tabs and some might be relatively
+  // expensive to create up front. This way, the view is only created lazily.
 
   final TabLabel label;
   final WidgetBuilder builder;
-
-  Widget buildContent(BuildContext context) {
-    assert(builder != null);
-    Widget content = builder(context);
-    assert(content != null);
-    return content;
-  }
 }
 
 class TabNavigator extends StatelessComponent {
@@ -607,15 +606,14 @@ class TabNavigator extends StatelessComponent {
   Widget build(BuildContext context) {
     assert(views != null && views.isNotEmpty);
     assert(selectedIndex >= 0 && selectedIndex < views.length);
-
-    TabBar tabBar = new TabBar(
-      labels: views.map((view) => view.label),
-      onChanged: _handleSelectedIndexChanged,
-      selectedIndex: selectedIndex,
-      isScrollable: isScrollable
-    );
-
-    Widget content = views[selectedIndex].buildContent(context);
-    return new Column([tabBar, new Flexible(child: content)]);
+    return new Column([
+      new TabBar(
+        labels: views.map((view) => view.label),
+        onChanged: _handleSelectedIndexChanged,
+        selectedIndex: selectedIndex,
+        isScrollable: isScrollable
+      ),
+      new Flexible(child: views[selectedIndex].builder(context))
+    ]);
   }
 }