Search code examples
flutterflutter-webflutter-navigation

Remove Overlay on Navigation in Flutter

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.

Solution

  • 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.