flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
11.48k stars 447 forks source link

How to set the expend attribute of tabs to make them adaptive. #1948

Open QuantQRI opened 1 year ago

QuantQRI commented 1 year ago

image

My code is:

` class AppTabs(UserControl): def init(self): super().init()

def tab_button(self, title: str, icon_name: icons, callback):
    return Tab(
        tab_content=Row(
            expand=True,
            alignment=MainAxisAlignment.CENTER,
            controls=[
                Icon(name=icon_name, color="#081d33"),
                Text(value=title, weight=FontWeight.BOLD, size=14)
            ]
        ),
        content=callback
    )

def build(self):
    return Container(
        expand=True,
        height=200,
        bgcolor="#ebebeb",
        border_radius=border_radius.only(top_left=15, top_right=15),
        padding=padding.only(left=15, right=15),
        content=Tabs(
            # scrollable=True,
            indicator_tab_size=True,
            indicator_color="#081d33",
            label_color="#081d33",
            # divider_color="#ebebeb",
            expand=True,
            selected_index=0,
            on_change=lambda e: print(e),
            tabs=[
                self.tab_button("Demo1", icons.DASHBOARD_ROUNDED, Container()),
                self.tab_button("Demo2", icons.VIEW_KANBAN_ROUNDED, Container()),
                self.tab_button("Demo3", icons.ACCOUNT_BALANCE_WALLET_ROUNDED, Container()),
                self.tab_button("Demo4", icons.DATA_THRESHOLDING_ROUNDED, Container()),
            ]
        )
    )

` I hope that when the sides of my window are wider, the width of the tabs will also change. But I don't know how to set it up, and this problem has troubled me for a long time.

Thanks for the help.

ndonkoHenri commented 1 year ago

This is a good concern! I still don't understand what particularly in flutter is meant to cause this effect.