diff --git a/examples/stocks/lib/main.dart b/examples/stocks/lib/main.dart index aaacab0d9f..dafd2c7b2d 100644 --- a/examples/stocks/lib/main.dart +++ b/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'; diff --git a/examples/stocks/lib/stock_home.dart b/examples/stocks/lib/stock_home.dart index 464baa4423..fea24c92a5 100644 --- a/examples/stocks/lib/stock_home.dart +++ b/examples/stocks/lib/stock_home.dart @@ -183,27 +183,30 @@ class StockHomeState extends State { 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 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 views = [ - new TabNavigatorView( - label: const TabLabel(text: 'MARKET'), - builder: buildMarketStockList - ), - new TabNavigatorView( - label: const TabLabel(text: 'PORTFOLIO'), - builder: buildPortfolioStocklist - ) - ]; return new TabNavigator( - views: views, + views: [ + 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; } ); diff --git a/examples/stocks/lib/stock_list.dart b/examples/stocks/lib/stock_list.dart index a65d7353ca..c9840c7198 100644 --- a/examples/stocks/lib/stock_list.dart +++ b/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 stocks; + final StockActionListener onAction; Widget build(BuildContext context) { return new Material( @@ -15,7 +18,12 @@ class Stocklist extends StatelessComponent { child: new ScrollableList( 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); } + ); + } ) ); } diff --git a/examples/stocks/lib/stock_row.dart b/examples/stocks/lib/stock_row.dart index 4ebe859a29..30ee1622de 100644 --- a/examples/stocks/lib/stock_row.dart +++ b/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 - ) - ) - ]) + ) ); } } diff --git a/packages/flutter/lib/src/fn3/tabs.dart b/packages/flutter/lib/src/fn3/tabs.dart index 61718feaba..96faf70e42 100644 --- a/packages/flutter/lib/src/fn3/tabs.dart +++ b/packages/flutter/lib/src/fn3/tabs.dart @@ -572,17 +572,16 @@ class TabBarState extends ScrollableState { } 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)) + ]); } }