Menu in StocksApp should dismiss when tapping elsewhere

sky/examples/stocks-fn/lib/stock_app.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 import 'package:sky/framework/components/action_bar.dart';
 import 'package:sky/framework/components/drawer.dart';
 import 'package:sky/framework/components/drawer_header.dart';
 import 'package:sky/framework/components/floating_action_button.dart';
 import 'package:sky/framework/components/icon.dart';
 import 'package:sky/framework/components/icon_button.dart';
 import 'package:sky/framework/components/input.dart';
 import 'package:sky/framework/components/menu_divider.dart';
 import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/components/modal_overlay.dart';
 import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/components/scaffold.dart';
 import 'package:sky/framework/debug/tracing.dart';
 import 'package:sky/framework/fn.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'package:sky/framework/theme/colors.dart';
 import 'stock_data.dart';
 import 'stock_list.dart';
 import 'stock_menu.dart';
 
@@ skipping 30 matching lines @@
     });
   }
 
   void _handleSearchEnd(_) {
     setState(() {
       _isSearching = false;
       _searchQuery = null;
     });
   }
 
-  void _handleSearchQueryChanged(query) {
+  void _handleSearchQueryChanged(String query) {
     setState(() {
       _searchQuery = query;
     });
   }
 
-  void _handleMenuClick(_) {
+  void _handleMenuShow(_) {
     setState(() {
       _menuController = new PopupMenuController();
       _menuController.open();
     });
   }
 
+  void _handleMenuHide(_) {
+    setState(() {
+      _menuController.close().then((_) {
+        setState(() {
+          _menuController = null;
+        });
+      });
+    });
+  }
+
   Drawer buildDrawer() {
     return new Drawer(
       controller: _drawerController,
       level: 3,
       children: [
         new DrawerHeader(children: [new Text('Stocks')]),
         new MenuItem(
           key: 'Inbox',
           icon: 'content/inbox',
           children: [new Text('Inbox')]),
@@ skipping 22 matching lines @@
           onGestureTap: _drawerController.toggle),
         center: new Container(
           style: _titleStyle,
           children: [new Text('Stocks')]),
         right: [
           new IconButton(
             icon: 'action/search_white',
             onGestureTap: _handleSearchBegin),
           new IconButton(
             icon: 'navigation/more_vert_white',
-            onGestureTap: _handleMenuClick)
+            onGestureTap: _handleMenuShow)
         ]),
       _actionBarStyle);
   }
 
   // TODO(abarth): Should we factor this into a SearchBar in the framework?
   Node buildSearchBar() {
     return new StyleNode(
       new ActionBar(
         left: new IconButton(
           icon: 'navigation/arrow_back_grey600',
           onGestureTap: _handleSearchEnd),
         center: new Input(
           focused: true,
           placeholder: 'Search stocks',
           onChanged: _handleSearchQueryChanged)),
       _searchBarStyle);
   }
 
+  void addMenuToOverlays(List<Node> overlays) {
+    if (_menuController == null)
+      return;
+    overlays.add(new ModalOverlay(
+      children: [new StockMenu(controller: _menuController)],
+      onDismiss: _handleMenuHide));
+  }
+
   Node build() {
     List<Node> overlays = [];
-
-    if (_menuController != null) {
-      overlays.add(new EventTarget(
-        new StockMenu(controller: _menuController),
-        onGestureTap: (_) {
-          // TODO(abarth): We should close the menu when you tap away from the
-          // menu rather than when you tap on the menu.
-          setState(() {
-            _menuController.close().then((_) {
-              setState(() {
-                _menuController = null;
-              });
-            });
-          });
-        }
-      ));
-    }
+    addMenuToOverlays(overlays);
 
     return new Scaffold(
       header: _isSearching ? buildSearchBar() : buildActionBar(),
       content: new Stocklist(stocks: _stocks, query: _searchQuery),
       fab: new FloatingActionButton(
         content: new Icon(type: 'content/add_white', size: 24), level: 3),
       drawer: buildDrawer(),
       overlays: overlays
     );
   }
 }