title: Remove Overlay on Navigation in Flutter
body: <p>I am using <code>Overlay.of(context)</code> to display some contents on button click. But there are two problems: </p>
  
  <ul>
  <li>The overlay is not removed while navigating to next screen.</li>
  <li>Dropdown buttons are used inside it. But the menu items are shown below it.</li>
  </ul>
  
  <p>Here is the 'Expected Output'.
  <a href="https://i.stack.imgur.com/MKK6m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MKK6m.png" alt="Expected Output"></a></p>
  
  <p>Current output is in this screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/X1wGF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X1wGF.png" alt="Current Output"></a></p>
  
  <p>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?</p>
  
  <p>PS: I am using <code>NavigatorKey</code> to change tables when names in the fixed sidebar are clicked as shown in the screenshot.</p>