bug: `Tabs` displays wrong in a `Container` if Container.alignment is set

[Creeper19472]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When ft.Tabs exist in a ft.Container, if ft.Container's alignment parameter is specified, then ft.Tabs will display abnormally.

Code sample

Code

# tabs_issue.py
import flet as ft


def main(page: ft.Page):
    page.navigation_bar = ft.NavigationBar(
        destinations=[ft.NavigationBarDestination("111", icon=ft.Icons.ABC)]
    )

    page.add(ft.Card(content=ft.Text("hi")))
    page.add(
        ft.Container(
            content=ft.Tabs(
                tabs=[
                    ft.Tab(
                        "Like", content=ft.Column(controls=[ft.Text("This is a test")])
                    )
                ]
            ),
            margin=10,
            padding=10,
            alignment=ft.alignment.bottom_left, # will cause wrong behavior, regardless of the type of ft.alignment used.
            visible=True,
        )
    )


if __name__ == "__main__":
    ft.app(main)

To reproduce

Run the code and the error is displayed

Expected behavior

When running the code provided, I expect the elements to display normally, i.e. the text should be displayed at least under the tab. However, all elements are all crammed into the top left corner, which is a clear mistake.

Screenshots / Videos

Captures

Operating System

Windows

Operating system details

Windows 11 26100.4946

Flet version

0.28.3

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs

[None]

Additional details

No response

[ndonkoHenri]

Can you please try v1 Tabs?: https://docs.flet.dev/controls/tabs

Example:

import flet as ft


def main(page: ft.Page):
    page.navigation_bar = ft.NavigationBar(
        destinations=[ft.NavigationBarDestination(icon=ft.Icons.ABC, label="One")]
    )

    page.add(ft.Card(content=ft.Text("My card")))
    page.add(
        ft.Container(
            margin=10,
            padding=10,
            alignment=ft.Alignment.TOP_CENTER,
            expand=True,
            content=ft.Tabs(
                length=2,
                content=ft.Column(
                    controls=[
                        ft.TabBar(tabs=[ft.Tab(label="One"), ft.Tab(label="Two")]),
                        ft.TabBarView(
                            expand=True,
                            controls=[ft.Text("Content 1"), ft.Text("Content 2")],
                        ),
                    ],
                ),
            ),
        )
    )


ft.run(main)

[Creeper19472]

@ndonkoHenri Tried, it remained black

[ndonkoHenri]

Which Flet version do you have please? (flet --version)

[Creeper19472]

Which Flet version do you have please? (flet --version)

@ndonkoHenri 0.70.0.dev5623

[ndonkoHenri]

Ah, the previous code i gave failed because we had just one destination. Will add an assertion check to prevent this from happening, i.e. keep the user aware there should be at least 2 destinations.

Working code with version 0.80:

import flet as ft


def main(page: ft.Page):
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(icon=ft.Icons.ONE_K, label="One"),
            ft.NavigationBarDestination(icon=ft.Icons.TWO_K, label="Two"),
        ]
    )

    page.add(ft.Card(content=ft.Text("My card")))
    page.add(
        ft.Container(
            margin=10,
            padding=10,
            alignment=ft.Alignment.TOP_CENTER,
            expand=True,
            content=ft.Tabs(
                length=2,
                content=ft.Column(
                    controls=[
                        ft.TabBar(tabs=[ft.Tab(label="One"), ft.Tab(label="Two")]),
                        ft.TabBarView(
                            expand=True,
                            controls=[ft.Text("Content 1"), ft.Text("Content 2")],
                        ),
                    ],
                ),
            ),
        )
    )


ft.run(main)

Feel free to let know if you face additional issues.