z-index on Containers

[Bbalduzz]

Question

Is it possible to "elevate" a Container from the rest of the page? Something like a DropDown?
I tried adding the self.animated_dropdown in the page.overlay but that messed up the selection logic, the dropdown dimensions and also the position. Now I'm stuck, I dont know how this could be possible without accessing the page.overlay. Maybe locating the self.dropdown_starter x and ys and the set the overlay to open there? But that seems impossible.
Does anyone have an idea?

Problem Showcase

showcase-zindex.mp4

Code sample

import flet as ft


class Dropdown(ft.UserControl):
    def __init__(self, controls, **kwargs):
        super().__init__(**kwargs)
        self.controls = controls

    def build_dropdown(self):
        def on_control_hover(e):
            e.control.bgcolor = "#2a2e35" if e.data == "true" else ""
            e.control.content.content.color = (
                ft.colors.with_opacity(0.9, "white") if e.data == "true" else "#959cae"
            )
            e.control.update()

        return ft.Container(
            ft.Column(
                [
                    ft.Container(
                        ft.Container(
                            ft.Text(data.title(), color="#959cae", size=15),
                            width=400,
                            height=30,
                            margin=5,
                            padding=ft.padding.only(top=3, left=15),
                        ),
                        on_hover=on_control_hover,
                        on_click=lambda: print(data),
                    )
                    for data in self.controls
                ],
                spacing=2,
            ),
            padding=10,
            bgcolor="#323741",
        )

    def set_dropdownsetter_text(self, e):
        self.dropdown_starter.textfield.value = e.control.content.value
        self.dropdown_starter.update()

    def open_dropdown(self, e):
        self.dropdown_widget.controls.append(self.animated_dropdown)
        self.dropdown_widget.update()

    def close_dropdown(self, e):
        self.dropdown_widget.controls.remove(self.animated_dropdown)
        self.dropdown_widget.update()

    def build(self):
        dropdown = self.build_dropdown()
        self.dropdown_starter = ft.TextField(
            on_focus=self.open_dropdown,
            on_blur=self.close_dropdown,
        )
        self.animated_dropdown = ft.AnimatedSwitcher(
            dropdown,
            transition=ft.AnimatedSwitcherTransition.SCALE,
            duration=300,
            reverse_duration=100,
            switch_in_curve=ft.AnimationCurve.EASE_IN_OUT,
            switch_out_curve=ft.AnimationCurve.EASE_OUT,
        )
        self.dropdown_widget = ft.Column(
            [self.dropdown_starter],
            width=300,
        )
        return self.dropdown_widget

def main(page: ft.Page):
    dropdown= Dropdown(
            controls=[
                "figma",
                "sketch",
                "invision studio",
                "framer",
                "adobe xd",
            ],
        ),
    page.add(dropdown)


ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

What do you think of the Stack control?

[Bbalduzz]

In my case Stack isn't really an option. This UserControl should be someting that I use in multiple apps, and most of the times the content to be "hovered" by this dropdown isnt arbitrarily set. It is like a ft.Dropdown alternative