Flutter - showing a PopupMenuButton in BottomNavigationBar





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







4















I am trying to show a menu when a navigation bar item is clicked. This was my attempt:



  @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: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: const Text('test1'), value: 'test1'),
new PopupMenuItem<String>(
child: const Text('test2'), value: 'test2'),
],
),
title: Text('more')),
],
currentIndex: 0,
),
body: new Container()));
}


I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the icon the title that I could not remove (even by adding padding: EdgeInsets.all(0.0)) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
enter image description hereenter image description here



I tried calling showMenu directly (the method that PopupMenuButton calls) when a BottomNavigationBarItem of index=2 (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from.










share|improve this question































    4















    I am trying to show a menu when a navigation bar item is clicked. This was my attempt:



      @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: (_) => <PopupMenuItem<String>>[
    new PopupMenuItem<String>(
    child: const Text('test1'), value: 'test1'),
    new PopupMenuItem<String>(
    child: const Text('test2'), value: 'test2'),
    ],
    ),
    title: Text('more')),
    ],
    currentIndex: 0,
    ),
    body: new Container()));
    }


    I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the icon the title that I could not remove (even by adding padding: EdgeInsets.all(0.0)) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
    enter image description hereenter image description here



    I tried calling showMenu directly (the method that PopupMenuButton calls) when a BottomNavigationBarItem of index=2 (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from.










    share|improve this question



























      4












      4








      4








      I am trying to show a menu when a navigation bar item is clicked. This was my attempt:



        @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: (_) => <PopupMenuItem<String>>[
      new PopupMenuItem<String>(
      child: const Text('test1'), value: 'test1'),
      new PopupMenuItem<String>(
      child: const Text('test2'), value: 'test2'),
      ],
      ),
      title: Text('more')),
      ],
      currentIndex: 0,
      ),
      body: new Container()));
      }


      I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the icon the title that I could not remove (even by adding padding: EdgeInsets.all(0.0)) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
      enter image description hereenter image description here



      I tried calling showMenu directly (the method that PopupMenuButton calls) when a BottomNavigationBarItem of index=2 (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from.










      share|improve this question
















      I am trying to show a menu when a navigation bar item is clicked. This was my attempt:



        @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: (_) => <PopupMenuItem<String>>[
      new PopupMenuItem<String>(
      child: const Text('test1'), value: 'test1'),
      new PopupMenuItem<String>(
      child: const Text('test2'), value: 'test2'),
      ],
      ),
      title: Text('more')),
      ],
      currentIndex: 0,
      ),
      body: new Container()));
      }


      I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the icon the title that I could not remove (even by adding padding: EdgeInsets.all(0.0)) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
      enter image description hereenter image description here



      I tried calling showMenu directly (the method that PopupMenuButton calls) when a BottomNavigationBarItem of index=2 (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from.







      dart flutter flutter-layout






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 16 '18 at 12:48







      M20

















      asked Nov 16 '18 at 12:01









      M20M20

      191116




      191116
























          2 Answers
          2






          active

          oldest

          votes


















          4














          Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).



          RelativeRect buttonMenuPosition(BuildContext c) {
          final RenderBox bar = c.findRenderObject();
          final RenderBox overlay = Overlay.of(c).context.findRenderObject();
          final RelativeRect position = RelativeRect.fromRect(
          Rect.fromPoints(
          bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
          bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
          ),
          Offset.zero & overlay.size,
          );
          return position;
          }


          @override
          Widget build(BuildContext context) {

          final key = GlobalKey<State<BottomNavigationBar>>();

          return DefaultTabController(
          length: 3,
          child: Scaffold(
          appBar: AppBar(
          title: Text("Home"),
          ),
          bottomNavigationBar: BottomNavigationBar(
          key: key,
          items: [
          const BottomNavigationBarItem(
          icon: Icon(Icons.home), title: Text('Home')),
          const BottomNavigationBarItem(
          icon: Icon(Icons.book), title: Text('Second')),
          const BottomNavigationBarItem(
          icon: Icon(Icons.add), title: Text('more')),
          ],
          currentIndex: 0,
          onTap: (index) async {
          final position = buttonMenuPosition(key.currentContext);
          if (index == 2) {
          final result = await showMenu(
          context: context,
          position: position,
          items: <PopupMenuItem<String>>[
          const PopupMenuItem<String>(
          child: Text('test1'), value: 'test1'),
          const PopupMenuItem<String>(
          child: Text('test2'), value: 'test2'),
          ],
          );
          }
          },
          ),
          body: Container()));
          }





          share|improve this answer

































            1














            Here's my attempt at it:



            @override
            Widget build(BuildContext context) {
            return Material(
            child: DefaultTabController(
            length: 3,
            child: Scaffold(
            appBar: AppBar(
            title: Text("Home"),
            ),
            bottomNavigationBar: BottomNavigationBar(
            items: [
            BottomNavigationBarItem(
            icon: new Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
            icon: new Icon(Icons.book), title: Text('Second')),
            BottomNavigationBarItem(
            icon: new Icon(Icons.add),
            title: Text('More')),
            ],
            currentIndex: 0,
            onTap: (int index) async {
            if(index == 2){
            await showMenu<String>(
            context: context,
            position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
            items: <PopupMenuItem<String>>[
            new PopupMenuItem<String>(
            child: const Text('test1'), value: 'test1'),
            new PopupMenuItem<String>(
            child: const Text('test2'), value: 'test2'),
            ],
            elevation: 8.0,
            );
            }
            },
            ),
            body: new Container())));
            }


            Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:



            enter image description here






            share|improve this answer
























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337506%2fflutter-showing-a-popupmenubutton-in-bottomnavigationbar%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              4














              Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).



              RelativeRect buttonMenuPosition(BuildContext c) {
              final RenderBox bar = c.findRenderObject();
              final RenderBox overlay = Overlay.of(c).context.findRenderObject();
              final RelativeRect position = RelativeRect.fromRect(
              Rect.fromPoints(
              bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
              bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
              ),
              Offset.zero & overlay.size,
              );
              return position;
              }


              @override
              Widget build(BuildContext context) {

              final key = GlobalKey<State<BottomNavigationBar>>();

              return DefaultTabController(
              length: 3,
              child: Scaffold(
              appBar: AppBar(
              title: Text("Home"),
              ),
              bottomNavigationBar: BottomNavigationBar(
              key: key,
              items: [
              const BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('Home')),
              const BottomNavigationBarItem(
              icon: Icon(Icons.book), title: Text('Second')),
              const BottomNavigationBarItem(
              icon: Icon(Icons.add), title: Text('more')),
              ],
              currentIndex: 0,
              onTap: (index) async {
              final position = buttonMenuPosition(key.currentContext);
              if (index == 2) {
              final result = await showMenu(
              context: context,
              position: position,
              items: <PopupMenuItem<String>>[
              const PopupMenuItem<String>(
              child: Text('test1'), value: 'test1'),
              const PopupMenuItem<String>(
              child: Text('test2'), value: 'test2'),
              ],
              );
              }
              },
              ),
              body: Container()));
              }





              share|improve this answer






























                4














                Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).



                RelativeRect buttonMenuPosition(BuildContext c) {
                final RenderBox bar = c.findRenderObject();
                final RenderBox overlay = Overlay.of(c).context.findRenderObject();
                final RelativeRect position = RelativeRect.fromRect(
                Rect.fromPoints(
                bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                ),
                Offset.zero & overlay.size,
                );
                return position;
                }


                @override
                Widget build(BuildContext context) {

                final key = GlobalKey<State<BottomNavigationBar>>();

                return DefaultTabController(
                length: 3,
                child: Scaffold(
                appBar: AppBar(
                title: Text("Home"),
                ),
                bottomNavigationBar: BottomNavigationBar(
                key: key,
                items: [
                const BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
                const BottomNavigationBarItem(
                icon: Icon(Icons.book), title: Text('Second')),
                const BottomNavigationBarItem(
                icon: Icon(Icons.add), title: Text('more')),
                ],
                currentIndex: 0,
                onTap: (index) async {
                final position = buttonMenuPosition(key.currentContext);
                if (index == 2) {
                final result = await showMenu(
                context: context,
                position: position,
                items: <PopupMenuItem<String>>[
                const PopupMenuItem<String>(
                child: Text('test1'), value: 'test1'),
                const PopupMenuItem<String>(
                child: Text('test2'), value: 'test2'),
                ],
                );
                }
                },
                ),
                body: Container()));
                }





                share|improve this answer




























                  4












                  4








                  4







                  Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).



                  RelativeRect buttonMenuPosition(BuildContext c) {
                  final RenderBox bar = c.findRenderObject();
                  final RenderBox overlay = Overlay.of(c).context.findRenderObject();
                  final RelativeRect position = RelativeRect.fromRect(
                  Rect.fromPoints(
                  bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                  bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                  ),
                  Offset.zero & overlay.size,
                  );
                  return position;
                  }


                  @override
                  Widget build(BuildContext context) {

                  final key = GlobalKey<State<BottomNavigationBar>>();

                  return DefaultTabController(
                  length: 3,
                  child: Scaffold(
                  appBar: AppBar(
                  title: Text("Home"),
                  ),
                  bottomNavigationBar: BottomNavigationBar(
                  key: key,
                  items: [
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text('Home')),
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.book), title: Text('Second')),
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.add), title: Text('more')),
                  ],
                  currentIndex: 0,
                  onTap: (index) async {
                  final position = buttonMenuPosition(key.currentContext);
                  if (index == 2) {
                  final result = await showMenu(
                  context: context,
                  position: position,
                  items: <PopupMenuItem<String>>[
                  const PopupMenuItem<String>(
                  child: Text('test1'), value: 'test1'),
                  const PopupMenuItem<String>(
                  child: Text('test2'), value: 'test2'),
                  ],
                  );
                  }
                  },
                  ),
                  body: Container()));
                  }





                  share|improve this answer















                  Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).



                  RelativeRect buttonMenuPosition(BuildContext c) {
                  final RenderBox bar = c.findRenderObject();
                  final RenderBox overlay = Overlay.of(c).context.findRenderObject();
                  final RelativeRect position = RelativeRect.fromRect(
                  Rect.fromPoints(
                  bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                  bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
                  ),
                  Offset.zero & overlay.size,
                  );
                  return position;
                  }


                  @override
                  Widget build(BuildContext context) {

                  final key = GlobalKey<State<BottomNavigationBar>>();

                  return DefaultTabController(
                  length: 3,
                  child: Scaffold(
                  appBar: AppBar(
                  title: Text("Home"),
                  ),
                  bottomNavigationBar: BottomNavigationBar(
                  key: key,
                  items: [
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text('Home')),
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.book), title: Text('Second')),
                  const BottomNavigationBarItem(
                  icon: Icon(Icons.add), title: Text('more')),
                  ],
                  currentIndex: 0,
                  onTap: (index) async {
                  final position = buttonMenuPosition(key.currentContext);
                  if (index == 2) {
                  final result = await showMenu(
                  context: context,
                  position: position,
                  items: <PopupMenuItem<String>>[
                  const PopupMenuItem<String>(
                  child: Text('test1'), value: 'test1'),
                  const PopupMenuItem<String>(
                  child: Text('test2'), value: 'test2'),
                  ],
                  );
                  }
                  },
                  ),
                  body: Container()));
                  }






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 16 '18 at 16:16

























                  answered Nov 16 '18 at 16:11









                  RingilRingil

                  3,85321227




                  3,85321227

























                      1














                      Here's my attempt at it:



                      @override
                      Widget build(BuildContext context) {
                      return Material(
                      child: DefaultTabController(
                      length: 3,
                      child: Scaffold(
                      appBar: AppBar(
                      title: Text("Home"),
                      ),
                      bottomNavigationBar: BottomNavigationBar(
                      items: [
                      BottomNavigationBarItem(
                      icon: new Icon(Icons.home), title: Text('Home')),
                      BottomNavigationBarItem(
                      icon: new Icon(Icons.book), title: Text('Second')),
                      BottomNavigationBarItem(
                      icon: new Icon(Icons.add),
                      title: Text('More')),
                      ],
                      currentIndex: 0,
                      onTap: (int index) async {
                      if(index == 2){
                      await showMenu<String>(
                      context: context,
                      position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
                      items: <PopupMenuItem<String>>[
                      new PopupMenuItem<String>(
                      child: const Text('test1'), value: 'test1'),
                      new PopupMenuItem<String>(
                      child: const Text('test2'), value: 'test2'),
                      ],
                      elevation: 8.0,
                      );
                      }
                      },
                      ),
                      body: new Container())));
                      }


                      Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:



                      enter image description here






                      share|improve this answer




























                        1














                        Here's my attempt at it:



                        @override
                        Widget build(BuildContext context) {
                        return Material(
                        child: DefaultTabController(
                        length: 3,
                        child: Scaffold(
                        appBar: AppBar(
                        title: Text("Home"),
                        ),
                        bottomNavigationBar: BottomNavigationBar(
                        items: [
                        BottomNavigationBarItem(
                        icon: new Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                        icon: new Icon(Icons.book), title: Text('Second')),
                        BottomNavigationBarItem(
                        icon: new Icon(Icons.add),
                        title: Text('More')),
                        ],
                        currentIndex: 0,
                        onTap: (int index) async {
                        if(index == 2){
                        await showMenu<String>(
                        context: context,
                        position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
                        items: <PopupMenuItem<String>>[
                        new PopupMenuItem<String>(
                        child: const Text('test1'), value: 'test1'),
                        new PopupMenuItem<String>(
                        child: const Text('test2'), value: 'test2'),
                        ],
                        elevation: 8.0,
                        );
                        }
                        },
                        ),
                        body: new Container())));
                        }


                        Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:



                        enter image description here






                        share|improve this answer


























                          1












                          1








                          1







                          Here's my attempt at it:



                          @override
                          Widget build(BuildContext context) {
                          return Material(
                          child: DefaultTabController(
                          length: 3,
                          child: Scaffold(
                          appBar: AppBar(
                          title: Text("Home"),
                          ),
                          bottomNavigationBar: BottomNavigationBar(
                          items: [
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.home), title: Text('Home')),
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.book), title: Text('Second')),
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.add),
                          title: Text('More')),
                          ],
                          currentIndex: 0,
                          onTap: (int index) async {
                          if(index == 2){
                          await showMenu<String>(
                          context: context,
                          position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
                          items: <PopupMenuItem<String>>[
                          new PopupMenuItem<String>(
                          child: const Text('test1'), value: 'test1'),
                          new PopupMenuItem<String>(
                          child: const Text('test2'), value: 'test2'),
                          ],
                          elevation: 8.0,
                          );
                          }
                          },
                          ),
                          body: new Container())));
                          }


                          Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:



                          enter image description here






                          share|improve this answer













                          Here's my attempt at it:



                          @override
                          Widget build(BuildContext context) {
                          return Material(
                          child: DefaultTabController(
                          length: 3,
                          child: Scaffold(
                          appBar: AppBar(
                          title: Text("Home"),
                          ),
                          bottomNavigationBar: BottomNavigationBar(
                          items: [
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.home), title: Text('Home')),
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.book), title: Text('Second')),
                          BottomNavigationBarItem(
                          icon: new Icon(Icons.add),
                          title: Text('More')),
                          ],
                          currentIndex: 0,
                          onTap: (int index) async {
                          if(index == 2){
                          await showMenu<String>(
                          context: context,
                          position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
                          items: <PopupMenuItem<String>>[
                          new PopupMenuItem<String>(
                          child: const Text('test1'), value: 'test1'),
                          new PopupMenuItem<String>(
                          child: const Text('test2'), value: 'test2'),
                          ],
                          elevation: 8.0,
                          );
                          }
                          },
                          ),
                          body: new Container())));
                          }


                          Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:



                          enter image description here







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 16 '18 at 15:13









                          SnakeyHipsSnakeyHips

                          696116




                          696116






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337506%2fflutter-showing-a-popupmenubutton-in-bottomnavigationbar%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Florida Star v. B. J. F.

                              Danny Elfman

                              Lugert, Oklahoma