5

I am using Overlay.of(context) to display some contents on button click. But there are two problems:

  • The overlay is not removed while navigating to next screen.
  • Dropdown buttons are used inside it. But the menu items are shown below it.

Here is the 'Expected Output'. Expected Output

Current output is in this screenshot.

Current Output

So, how can the overlay be removed while navigating and the dropdown be shown properly ? If it is not possible with overlay, is there any workaround?

PS: I am using NavigatorKey to change tables when names in the fixed sidebar are clicked as shown in the screenshot.

Bishal
  • 71
  • 1
  • 8

2 Answers2

2

I found a solution to my problems.

  • The Overlay is removed while navigating by using RouteAware + RouteObserver as shown in this stackoverflow answer.
  • For dropdown items rendered below the overlay, there is a fork of default dropdown button which pushes dropdown items' overlay into root navigator instead of nested navigator, and displays them on the top.
Bishal
  • 71
  • 1
  • 8
0

Since you havent shared any code I can only imagine how you designed your UI. If you share the code in a Dartpad may be some of us can help.

  1. OverlayEntry can be removed using the removemethod as per the documentation here. You can do this when you are handling the click on the left menu.

  2. For the second problem I couldn't find any working solution. I doubt this is not possible because Overlay is a Stack widget which is on top of all pages as per the docs here. If you look into the DropDownButton code it internally uses Navigator to push a new page route as shown here which is still below the Overlay stack and hence I suspect you can achieve this.

That said, you should probably not use Overlay for this purpose. Instead you are better off to use showMenu function from flutter which provides more convenience and will behave as you expected in most cases. Positioning the menu need some hackery with showMenu but achievable.

You can also check flutter_portal package which has some nice features. But its still in its development phase.

PS: For inspiration you can check my answer in this post especially the showMenu approach.

Abhilash Chandran
  • 6,803
  • 3
  • 32
  • 50
  • I tried both `showMenu` and `flutter_portal`. But it seems `showMenu` is for generating menu items, which is not what I am trying. I want to show some input widgets for filtering the table. `flutter_portal` didn't support `DropdownButton`. There were some complicated nested navigator problems. I think I should go for some other ways to show those filters than dealing with overlays. – Bishal Mar 27 '20 at 05:04