Make the checkbox in settings control the radio buttons in the drawer, to...

Make the checkbox in settings control the radio buttons in the drawer, to demonstrate how to link state in different places in an app.

R=jackson@google.com

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

examples/stocks2/lib/stock_app.dart

@@ -13,22 +13,45 @@ import 'package:sky/widgets/widget.dart';
 import 'stock_data.dart';
 import 'stock_home.dart';
 import 'stock_settings.dart';
+import 'stock_types.dart';
 
 class StocksApp extends App {
 
+  NavigationState _navigationState;
   StocksApp() {
     _navigationState = new NavigationState([
       new Route(
         name: '/', 
-        builder: (navigator, route) => new StockHome(navigator, route, _stocks)
+        builder: (navigator, route) => new StockHome(navigator, _stocks, stockMode, modeUpdater)
       ),
       new Route(
         name: '/settings',
-        builder: (navigator, route) => new StockSettings(navigator)
+        builder: (navigator, route) => new StockSettings(navigator, stockMode, settingsUpdater)
       ),
     ]);
   }
 
+  void onBack() {
+    setState(() {
+      _navigationState.pop();
+    });
+    // TODO(jackson): Need a way to invoke default back behavior here
+  }
+
+  StockMode stockMode = StockMode.optimistic;
+  void modeUpdater(StockMode value) {
+    setState(() {
+      stockMode = value;
+    });
+  }
+  void settingsUpdater({StockMode mode}) {
+    setState(() {
+      if (mode != null)
+        stockMode = mode;
+    });
+  }
+
+  final List<Stock> _stocks = [];
   void didMount() {
     super.didMount();
     new StockDataFetcher((StockData data) {
@@ -38,16 +61,6 @@ class StocksApp extends App {
     });
   }
 
-  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 Theme(
       data: new ThemeData.light(

examples/stocks2/lib/stock_home.dart

@@ -23,25 +23,30 @@ import 'package:sky/widgets/widget.dart';
 import 'stock_data.dart';
 import 'stock_list.dart';
 import 'stock_menu.dart';
+import 'stock_types.dart';
 
-enum StockMode { optimistic, pessimistic }
+typedef void ModeUpdater(StockMode mode);
 
 class StockHome extends Component {
 
-  StockHome(this.navigator, RouteBase route, this.stocks) : super(stateful: true) {
+  StockHome(this.navigator, this.stocks, this.stockMode, this.modeUpdater) : super(stateful: true) {
     // if (debug)
     //   new Timer(new Duration(seconds: 1), dumpState);
     _drawerController = new DrawerController(_handleDrawerStatusChanged);
   }
 
+  Navigator navigator;
+  List<Stock> stocks;
+  StockMode stockMode;
+  ModeUpdater modeUpdater;
+
   void syncFields(StockHome source) {
     navigator = source.navigator;
     stocks = source.stocks;
+    stockMode = source.stockMode;
+    modeUpdater = source.modeUpdater;
   }
 
-  Navigator navigator;
-  List<Stock> stocks;
-
   bool _isSearching = false;
   String _searchQuery;
 
@@ -102,11 +107,12 @@ class StockHome extends Component {
     });
   }
 
-  StockMode _stockMode = StockMode.optimistic;
   void _handleStockModeChange(StockMode value) {
     setState(() {
-      _stockMode = value;
+      stockMode = value;
     });
+    if (modeUpdater != null)
+      modeUpdater(value);
   }
 
   Drawer buildDrawer() {
@@ -127,14 +133,14 @@ class StockHome extends Component {
           onPressed: () => _handleStockModeChange(StockMode.optimistic),
           children: [
             new Flexible(child: new Text('Optimistic')),
-            new Radio(value: StockMode.optimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
+            new Radio(value: StockMode.optimistic, groupValue: stockMode, onChanged: _handleStockModeChange)
           ]),
         new MenuItem(
           icon: 'action/thumb_down',
           onPressed: () => _handleStockModeChange(StockMode.pessimistic),
           children: [
             new Flexible(child: new Text('Pessimistic')),
-            new Radio(value: StockMode.pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
+            new Radio(value: StockMode.pessimistic, groupValue: stockMode, onChanged: _handleStockModeChange)
           ]),
         new MenuDivider(),
         new MenuItem(

examples/stocks2/lib/stock_settings.dart

@@ -12,24 +12,43 @@ import 'package:sky/widgets/scaffold.dart';
 import 'package:sky/widgets/theme.dart';
 import 'package:sky/widgets/tool_bar.dart';
 
+import 'stock_types.dart';
+
+typedef void SettingsUpdater({StockMode mode});
+
 class StockSettings extends Component {
 
-  StockSettings(this._navigator);
+  StockSettings(this.navigator, this.stockMode, this.updater) : super(stateful: true);
+
+  Navigator navigator;
+  StockMode stockMode;
+  SettingsUpdater updater;
 
-  Navigator _navigator;
+  void syncFields(StockSettings source) {
+    navigator = source.navigator;
+    stockMode = source.stockMode;
+    updater = source.updater;
+  }
 
-  bool _awesome = false;
-  void _handleAwesomeChanged(bool value) {
+  void _handleStockModeChanged(bool value) {
     setState(() {
-      _awesome = value;
+      stockMode = value ? StockMode.optimistic : StockMode.pessimistic;
     });
+    sendUpdates();
+  }
+
+  void sendUpdates() {
+    if (updater != null)
+      updater(
+        mode: stockMode
+      );
   }
 
   Widget buildToolBar() {
     return new ToolBar(
       left: new IconButton(
         icon: 'navigation/arrow_back_white',
-        onPressed: _navigator.pop),
+        onPressed: navigator.pop),
       center: new Text('Settings', style: Theme.of(this).text.title)
     );
   }
@@ -41,10 +60,10 @@ class StockSettings extends Component {
       child: new Block([
         new MenuItem(
           icon: 'action/thumb_up',
-          onPressed: () => _handleAwesomeChanged(!_awesome),
+          onPressed: () => _handleStockModeChanged(stockMode == StockMode.optimistic ? false : true),
           children: [
             new Flexible(child: new Text('Everything is awesome')),
-            new Checkbox(value: _awesome, onChanged: _handleAwesomeChanged)
+            new Checkbox(value: stockMode == StockMode.optimistic, onChanged: _handleStockModeChanged)
           ]
         ),
       ])

examples/stocks2/lib/stock_types.dart

+enum StockMode { optimistic, pessimistic }