Improve the openning animation for PopupMenu

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/input.dart';
 import 'package:sky/framework/components/menu_divider.dart';
 import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/fn.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'stock_data.dart';
 import 'stock_list.dart';
 import 'stock_menu.dart';
 
 class StocksApp extends App {
 
-  DrawerController _DrawerController = new DrawerController();
+  DrawerController _drawerController = new DrawerController();
+  PopupMenuController _menuController = new PopupMenuController();
 
   static Style _style = new Style('''
     display: flex;
     flex-direction: column;
     height: -webkit-fill-available;
     ${typography.typeface};
     ${typography.black.body1};'''
   );
 
   static Style _iconStyle = new Style('''
@@ skipping 17 matching lines @@
   }
 
   void _handleSearchClick(_) {
     setState(() {
       _isSearching = !_isSearching;
     });
   }
 
   void _handleMenuClick(_) {
     setState(() {
-      _isShowingMenu = !_isShowingMenu;
+      _menuController.open();
     });
   }
 
   void _handleSearchQueryChanged(query) {
     setState(() {
       _searchQuery = query;
     });
   }
 
   Node build() {
     var drawer = new Drawer(
-      controller: _DrawerController,
+      controller: _drawerController,
       level: 3,
       children: [
         new DrawerHeader(
           children: [new Text('Stocks')]
         ),
         new MenuItem(
           key: 'Inbox',
           icon: 'content/inbox',
           children: [new Text('Inbox')]
         ),
@@ skipping 23 matching lines @@
           onChanged: _handleSearchQueryChanged);
     } else {
       title = new Text('Stocks');
     }
 
     var toolbar = new ActionBar(
       children: [
         new Icon(key: 'menu', style: _iconStyle,
             size: 24,
             type: 'navigation/menu_white')
-          ..events.listen('gesturetap', _DrawerController.toggle),
+          ..events.listen('gesturetap', _drawerController.toggle),
         new Container(
           style: _titleStyle,
           children: [title]
         ),
         new Icon(key: 'search', style: _iconStyle,
             size: 24,
             type: 'action/search_white')
           ..events.listen('gesturetap', _handleSearchClick),
         new Icon(key: 'more_white', style: _iconStyle,
             size: 24,
@@ skipping 10 matching lines @@
     var children = [
       new Container(
         key: 'Content',
         style: _style,
         children: [toolbar, list]
       ),
       fab,
       drawer
     ];
 
-    if (_isShowingMenu) {
-      children.add(new StockMenu()..events.listen('gesturetap', (_) {
+    if (_menuController.isOpen) {
+      children.add(new StockMenu(controller: _menuController)
+                   ..events.listen('gesturetap', (_) {
+        // TODO(abarth): We should close the menu when you tap away from the
+        // menu rather than when you tap on the menu.
         setState(() {
-          _isShowingMenu = false;
+          _menuController.close();
         });
       }));
     }
 
     return new Container(key: 'StocksApp', children: children);
   }
 }