title: Flutter - showing a PopupMenuButton in BottomNavigationBar
body: <p>I am trying to show a menu when a navigation bar item is clicked. This was my attempt:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return DefaultTabController(
          length: 3,
          child: Scaffold(
              appBar: MyAppBar(
                title: "Home",
                context: context,
              ),
              bottomNavigationBar: BottomNavigationBar(
                items: [
                  BottomNavigationBarItem(
                      icon: new Icon(Icons.home), title: Text('Home')),
                  BottomNavigationBarItem(
                      icon: new Icon(Icons.book), title: Text('Second')),
                  BottomNavigationBarItem(
                      icon: new PopupMenuButton(
                        icon: Icon(Icons.add),
                        itemBuilder: (_) =&gt; &lt;PopupMenuItem&lt;String&gt;&gt;[
                              new PopupMenuItem&lt;String&gt;(
                                  child: const Text('test1'), value: 'test1'),
                              new PopupMenuItem&lt;String&gt;(
                                  child: const Text('test2'), value: 'test2'),
                            ],
                      ),
                      title: Text('more')),
                ],
                currentIndex: 0,
              ),
              body: new Container()));
    }
  </code></pre>
  
  <p>I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the <code>icon</code> the <code>title</code> that I could not remove (even by adding <code>padding: EdgeInsets.all(0.0)</code>) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
  <a href="https://i.stack.imgur.com/AGgqW.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/AGgqW.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/f39MW.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/f39MW.jpg" alt="enter image description here"></a></p>
  
  <p>I tried calling <code>showMenu</code> directly (the method that <code>PopupMenuButton</code> calls) when a <code>BottomNavigationBarItem</code> of <code>index=2</code> (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from. </p>