Tabs cannot add any content when they are sub components

[modaye]

Once content is added to the tab, the tab on the interface cannot be switched by clicking

class Application:
    def __call__(self, page: Page):
        # page.add(self.menu)
        page.add(
            Row(controls=[
                Tabs(
                    selected_index=0,
                    on_change=lambda x: print(x),
                    tabs=[Tab(
                        text="code",
                        # content=Text("Code"),
                    ), Tab(text="active"), Tab(text="completed")],
                )
            ],
            ))
        page.update()


flet.app(target=Application())

Please cancel the content comment for reproduction

[modaye]

Tonight let me break down a little, trying to stop any idea immediately by the framework availability

[FeodorFitsner]

When you share a repro code please include imports as well.

[FeodorFitsner]

A working example:

import flet
from flet import Page, Tab, Tabs, Text


def main(page: Page):
    # page.add(self.menu)
    page.add(
        Tabs(
            selected_index=0,
            on_change=lambda x: print(x),
            tabs=[
                Tab(
                    text="code",
                    content=Text("Code"),
                ),
                Tab(text="active"),
                Tab(text="completed"),
            ],
        )
    )


flet.app(target=main)

I'm not sure I understand the issue.

[modaye]

OK, thank you. Your understanding is correct, but once Tabs are put into UserControl or Row, this example will not work

[FeodorFitsner]

Use expands too.

[modaye]

import flet
from flet import Page, Tab, Tabs, Text, Column, Row


def main(page: Page):
    # page.add(self.menu)
    page.expand = True
    page.add(
        Row([
            Tabs(
                selected_index=0,
                on_change=lambda x: print(x),
                expand=True,
                tabs=[
                    Tab(
                        text="code",
                        content=Text("Code"),
                    ),
                    Tab(text="active"),
                    Tab(text="completed"),
                ],
            )]
        )

    )


flet.app(target=main)

I modified the example you gave. If Row is used, the problem still exists. If Column is used, it will work normally. I did not retest whether UserControl is normal

[FeodorFitsner]

Row must be expanded as well.

[modaye]

You are right, but this is too confusing. I tried UserControl and succeeded. I just added kwargs param expand=True

[FeodorFitsner]

It is confusing, agree. It's how Flutter layout mechanism works - it's different from HTML. I'm working on adding more checks and messages to prevent/diagnose layout issues like that. Leaving this issue opened as a bug.

[ndonkoHenri]

I'm working on adding more checks and messages to prevent/diagnose layout issues like that.

This will be very useful!