[Question] How to align element in page.overlay() list?

[ne4sp]

Question

I making virtual keyboard and main problem for me is aligning element in overlay list, cause by page.update() it shows in top left corner. I was trying
page.vertical_alignment = 'start'; page.horizontal_alignment = 'center'
but it doesn`t works for page.overlay

Code sample

No response

Error message

No response

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

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

[ndonkoHenri]

Follow this: https://flet.dev/docs/controls/stack/#absolute-positioning-inside-stack
(See the overlay controls as Stack controls)

[ne4sp]

Yes, it works as I want.

2025-03-25.16-11-47.mp4

Example code from video

import flet as ft

def main(page: ft.Page):

    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.window.full_screen = True

    overlay_pic = ft.Stack(
        [
            ft.Container(
                width=1920,
                height=420,
                bgcolor='red',
                bottom=0,
            )
        ],
        width=1920,
        height=1080,
    )

    def switch_overlay(e):
        if overlay_pic not in page.overlay:
            page.overlay.append(overlay_pic)
        else:
            page.overlay.remove(overlay_pic)
        page.update()


    button = ft.ElevatedButton(
        text='switch overlay',
        on_click=switch_overlay
    )


    page.add(
        button
    )

ft.app(main)

[ndonkoHenri]

fyi: You must not create a Stack (except if you need/want to, of course). The overlay controls 'live' in a Stack.

Example:

overlay_pic = ft.Container(
        width=1920,
        height=420,
        bgcolor="red",
        bottom=0,
    )