Popups/Calendar is not coming over the overlay

[Lazeeez]

Description

If we put a calendar/Datepicker such as ShowDatePickerhttps://api.flutter.dev/flutter/material/showDatePicker.html button inside the overlay, the calendar popups behind the overlay which is not accessible. We have to close the overlay to access the calendar.

To Reproduce
Steps to reproduce the behavior:

1. Implement 'ShowOverlay' in an empty screen
2. Add ShowDatePicker inside that overlay (overlay being the parent of ShowDatePicker)
3. Try to open ShowDatePicker

Expected behaviour
The expected behaviour of the similar situation should be that the calendar stacks on top of the overlay and is accessible also.

Screenshots

Version (please complete the following information):

• Flutter Version: 3.3.9
• OS: Chrome (macOS 14)
• OverlaySupport Version : latest

Additional context
Add any other context about the problem here.

[boyan01]

Yes, this is the expected behivior, since the global overlay should on the top of all app widgets(include dialog).

This situation seem the same as #83 (comment)

---

According to your UI diagram, I think it is more appropriate for you to use dialog instead overlay to pop up widget in this scenario.

[Lazeeez]

I want to use overlay in my design, is there a way with which i can bound the dialog box to the overlay. i.e. the dialog box renders inside of the overlay, not behind it.

[Lazeeez]

DropDownButton also giving the same result. i programmed the DropDownButton inside the a widget and called it inside the overlay. as soon as i tap the button the menu is open behind the overlay instead of opening on top of it.

[boyan01]

Because global overlay in the widget hierarchy is more front to screen than the other app widgets (normal page, dialog, popup), so they are always show behind the overlay.

The only way is like #83 , use OverlaySupport.local to make the overlay from higher hierarchy to lower.

1. use OverlaySupport.local warp you current page. (Scaffold or something elese)
2. Then call showOverlay with context parameter.

[Lazeeez]

it is still behind the overlay. Can you give me a quick implementation, maybe I'm not understanding that properly.
thanks in advance.

[Lazeeez]

I wrapped the page like you said

and then called the showoverlay with context.

is this correct?

[boyan01]

Maybe your using the wrong context to showOverlay. How about wrap the ElevatedButton with a Builder Widget, then use the context provided by Builder?

[Lazeeez]

you wanna come on a google meet? it'll be way easier and quicker that way..

[Lazeeez]

it was the right context but still here's what i did.

same thing.

[boyan01]

you wanna come on a google meet? it'll be way easier and quicker that way..

No, I don't like talk.

same thing.

accroding the picture, you are not using the context provided by Builder. it looks like you just changed a parameter name of showOverlay 's builder lambda.

It should be showOverlay((context, t) { return YouWidget(); }, context: context1)

[Lazeeez]

its saying overlayentry is not a widget