Have tabs in a row in Python Flet

Question

The issue

I am using Flet as the GUI library for my project. I am trying to create a page where its separated in two half (left and right), where on the left side, there are some content, and on the right side there are tabs and more content in the tabs. (see image below)

The issue is that the UI breaks and is unresponsive when I try to add ft.Tabs under the ft.Row.

The question is whether it's a bug or intended. If it's intended, what can I do so I can build a UI where the tab section takes just half of the window (right side)? Should I use something else other than ft.Row to do so?

Code to replicate the issue

MAIN_GUI = ft.Container(
    margin=ft.margin.only(bottom=40),
    content=ft.Row([
        ft.Card(
            elevation=30,
            content=ft.Container(
                content=ft.Text("Amazing LEFT SIDE Content Here", size=50, weight=ft.FontWeight.BOLD),
                border_radius=ft.border_radius.all(20),
                bgcolor=ft.colors.WHITE24,
                padding=45,
            )
        ),
        ft.Tabs(
            selected_index=1,
            animation_duration=300,
            tabs=[
                ft.Tab(
                    text="Tab 1",
                    icon=ft.icons.SEARCH,
                    content=ft.Container(
                        content=ft.Card(
                            elevation=30,
                            content=ft.Container(
                                content=ft.Text("Amazing TAB 1 content", size=50, weight=ft.FontWeight.BOLD),
                                border_radius=ft.border_radius.all(20),
                                bgcolor=ft.colors.WHITE24,
                                padding=45,
                            )
                        )
                    ),
                ),
                ft.Tab(
                    text="Tab 2",
                    icon=ft.icons.SETTINGS,
                    content=ft.Text("Amazing TAB 2 content"),
                ),
            ],
        )
    ])
)


def main(page: ft.Page):
    page.padding = 50
    page.add(MAIN_GUI)
    page.update()


if __name__ == '__main__':
    ft.app(target=main)
    cv2.destroyAllWindows()

As mentioned, what I am trying to do is to have the window separated to the left half and the right half, where the tabs would only be on the right half.

However, when running that code, only the tabs are visible on the right side and nothing is interactable.

Answer 1

To prevent blocks from colliding with each other, you just need to apply the expand property. For the main container, set it to True so that it occupies the entire available area, and for two tabs, set the necessary coefficients. I put 4 and 3.

import flet as ft

MAIN_GUI = ft.Container(
    margin=ft.margin.only(bottom=40),
    expand=True,
    content=ft.Row([
        ft.Card(
            elevation=30,
            expand=4,
            content=ft.Container(
                content=ft.Text("Amazing LEFT SIDE Content Here", size=50, weight=ft.FontWeight.BOLD),
                border_radius=ft.border_radius.all(20),
                bgcolor=ft.colors.WHITE24,
                padding=45,
            )
        ),
        ft.Tabs(
            selected_index=0,
            animation_duration=300,
            expand=3,
            tabs=[
                ft.Tab(
                    text="Tab 1",
                    icon=ft.icons.SEARCH,
                    content=ft.Container(
                        content=ft.Card(
                            elevation=30,
                            content=ft.Container(
                                content=ft.Text("Amazing TAB 1 content", size=50, weight=ft.FontWeight.BOLD),
                                border_radius=ft.border_radius.all(20),
                                bgcolor=ft.colors.WHITE24,
                                padding=45,
                            )
                        )
                    ),
                ),
                ft.Tab(
                    text="Tab 2",
                    icon=ft.icons.SETTINGS,
                    content=ft.Text("Amazing TAB 2 content"),
                ),
            ],
        )
    ])
)


def main(page: ft.Page):
    page.padding = 50
    page.add(MAIN_GUI)
    page.update()


if __name__ == '__main__':
    ft.app(target=main)
    # cv2.destroyAllWindows()