Stack size behaviour

[mikaelho]

Description

Stack is not sized consistently, rather depending on the size of the contents.

Code example to reproduce the issue:

Without content the Stack (shown in grey in the example) fills the whole screen.

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            bgcolor=ft.colors.GREY,
            content=ft.Stack(
                [],
            ),
            expand=True,
        )
    )

ft.app(main)

With content the Stack is set to the width of the content.

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            bgcolor=ft.colors.GREY,
            content=ft.Stack(
                [
                    ft.ElevatedButton("Button"),
                ],
            ),
            expand=True,
        )
    )

ft.app(main)

Describe the results you received:

Without content:

With content:

Describe the results you expected:

Stack consistently sized to fill the page.

Additional information you deem important (e.g. issue happens only occasionally):

I experimented adding more layers (Stack within Stack, and some other configurations), with the same result.

This may be one of the causes for some of the UI layout issues people in the community seem to be having.

This also makes using the new Canvas on_resize difficult. Wrapping the Stack in Canvas instead of the Container, and using on_resize to report the canvas size, I get size information that is consistent with the images above.

In a more complex scenario I also saw the Stack size jump back to "full screen" after an update to a control, but I was unable to reproduce that in this simple example.

Flet version (pip show flet):

0.6.2

Operating system:

MacOS 13.3

Additional environment details:

Running from PyCharm.

[mikaelho]

Interesting. If I add any positioning attribute to the button (even something with seemingly no impact like left=0), everything works as expected:

import flet as ft

def main(page: ft.Page):
    container = ft.canvas.Canvas(
        content=ft.Stack([ft.ElevatedButton("Search"), left=0], expand=True),
        expand=True,
        on_resize=lambda e: print(e.width, e.height),
    )
    page.add(container)

ft.app(main)