Make back button control drawer in stocks app

Currently you lose your scroll and drawer state when coming back from the settings pane.
I think we should solve this by having the Navigator maintain a Stack and
keeping the StockHome alive underneath it. But this is good enough for a first iteration.

R=abarth@chromium.org, abarth

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

examples/stocks2/lib/stock_app.dart

@@ -7,29 +7,45 @@ import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/navigator.dart';
 import 'package:sky/widgets/widget.dart';
 
+import 'stock_data.dart';
 import 'stock_home.dart';
 import 'stock_settings.dart';
 
 class StocksApp extends App {
 
-  NavigationState _navState = new NavigationState([
-    new Route(name: '/', builder: (navigator) => new StockHome(navigator)),
-    new Route(name: '/settings', builder: (navigator) => new StockSettings(navigator)),
-  ]);
+  StocksApp() {
+    _navigationState = new NavigationState([
+      new Route(
+        name: '/', 
+        builder: (navigator, route) => new StockHome(navigator, route, _stocks)
+      ),
+      new Route(
+        name: '/settings',
+        builder: (navigator, route) => new StockSettings(navigator)
+      ),
+    ]);
+  }
 
-  void onBack() {
-    if (_navState.hasPrevious()) {
+  void didMount() {
+    new StockDataFetcher((StockData data) {
       setState(() {
-        _navState.pop();
+        data.appendTo(_stocks);
       });
-      return;
-    }
-    print ("Should exit app here");
+    });
+  }
+
+  final List<Stock> _stocks = [];
+  NavigationState _navigationState;
+
+  void onBack() {
+    setState(() {
+      _navigationState.pop();
+    });
     // TODO(jackson): Need a way to invoke default back behavior here
   }
 
   Widget build() {
-    return new Navigator(_navState);
+    return new Navigator(_navigationState);
   }
 }
 

examples/stocks2/lib/stock_home.dart

@@ -29,19 +29,19 @@ enum StockMode { optimistic, pessimistic }
 
 class StockHome extends Component {
 
-  StockHome(this._navigator) {
+  StockHome(this.navigator, RouteBase route, this.stocks) : super(stateful: true) {
     // if (debug)
     //   new Timer(new Duration(seconds: 1), dumpState);
-    new StockDataFetcher((StockData data) {
-      setState(() {
-        data.appendTo(_stocks);
-      });
-    });
     _drawerController = new DrawerController(_handleDrawerStatusChanged);
   }
 
-  List<Stock> _stocks = [];
-  Navigator _navigator;
+  void syncFields(StockHome source) {
+    navigator = source.navigator;
+    stocks = source.stocks;
+  }
+
+  Navigator navigator;
+  List<Stock> stocks;
 
   bool _isSearching = false;
   String _searchQuery;
@@ -69,6 +69,9 @@ class StockHome extends Component {
   bool _drawerShowing = false;
 
   void _handleDrawerStatusChanged(bool showing) {
+    if (!showing && navigator.currentRoute.name == "/drawer") {
+      navigator.pop();
+    }
     setState(() {
       _drawerShowing = showing;
     });
@@ -137,7 +140,7 @@ class StockHome extends Component {
         new MenuDivider(),
         new MenuItem(
           icon: 'action/settings',
-          onPressed: () => _navigator.pushNamed('/settings'),
+          onPressed: () => navigator.pushNamed('/settings'),
           children: [new Text('Settings')]),
         new MenuItem(
           icon: 'action/help',
@@ -146,11 +149,18 @@ class StockHome extends Component {
     );
   }
 
+  void _handleOpenDrawer() {
+    _drawerController.open();
+    navigator.pushState("/drawer", (_) {
+      _drawerController.close();
+    });
+  }
+
   Widget buildToolBar() {
     return new ToolBar(
         left: new IconButton(
           icon: 'navigation/menu_white',
-          onPressed: _drawerController.toggle),
+          onPressed: _handleOpenDrawer),
         center: new Text('Stocks', style: typography.white.title),
         right: [
           new IconButton(
@@ -194,7 +204,7 @@ class StockHome extends Component {
     List<Widget> overlays = [
       new Scaffold(
         toolbar: _isSearching ? buildSearchBar() : buildToolBar(),
-        body: new Stocklist(stocks: _stocks, query: _searchQuery),
+        body: new Stocklist(stocks: stocks, query: _searchQuery),
         floatingActionButton: new FloatingActionButton(
           child: new Icon(type: 'content/add_white', size: 24)
         ),

examples/widgets/navigation.dart

@@ -4,13 +4,12 @@
 
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/navigator.dart';
-import 'package:sky/widgets/transition.dart';
 import 'package:sky/widgets/raised_button.dart';
 
 List<Route> routes = [
   new Route(
     name: 'home',
-    builder: (navigator) => new Container(
+    builder: (navigator, route) => new Container(
       padding: const EdgeDims.all(20.0),
       decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
       child: new Block([
@@ -28,14 +27,14 @@ List<Route> routes = [
   ),
   new Route(
     name: 'shopping',
-    builder: (navigator) => new Container(
+    builder: (navigator, route) => new Container(
       padding: const EdgeDims.all(20.0),
       decoration: new BoxDecoration(backgroundColor: const Color(0xFFBF5FFF)),
       child: new Block([
         new Text("Village Shop"),
         new RaisedButton(
           child: new Text('RETURN HOME'),
-          onPressed: () => navigator.back()
+          onPressed: () => navigator.pop()
         ),
         new RaisedButton(
           child: new Text('GO TO DUNGEON'),
@@ -46,7 +45,7 @@ List<Route> routes = [
   ),
   new Route(
     name: 'adventure',
-    builder: (navigator) => new Container(
+    builder: (navigator, route) => new Container(
       padding: const EdgeDims.all(20.0),
       decoration: new BoxDecoration(backgroundColor: const Color(0xFFDC143C)),
       child: new Block([