Skip to content

TabBarTheme

Customizes the appearance of TabBar control across the app.

Properties

Properties#

divider_color #

divider_color: ColorValue | None = None

Overrides the default value for TabBar.divider_color.

divider_height #

divider_height: Number | None = None

Overrides the default value for TabBar.divider_height.

indicator #

indicator: UnderlineTabIndicator | None = None

Overrides the default value for TabBar.indicator.

indicator_animation #

indicator_animation: TabIndicatorAnimation | None = None

Overrides the default value for TabBar.indicator_animation.

indicator_color #

indicator_color: ColorValue | None = None

Overrides the default value for TabBar.indicator_color.

indicator_size #

indicator_size: TabBarIndicatorSize | None = None

Overrides the default value for TabBar.indicator_size.

label_color #

label_color: ColorValue | None = None

Overrides the default value for TabBar.label_color.

label_padding #

label_padding: PaddingValue | None = None

Overrides the default value for TabBar.label_padding.

label_text_style #

label_text_style: TextStyle | None = None

Overrides the default value for TabBar.label_text_style.

mouse_cursor #

mouse_cursor: (
    ControlStateValue[MouseCursor | None] | None
) = None

Overrides the default value for TabBar.mouse_cursor.

overlay_color #

overlay_color: ControlStateValue[ColorValue] | None = None

Overrides the default value for TabBar.overlay_color.

splash_border_radius #

splash_border_radius: BorderRadiusValue | None = None

Overrides the default value for TabBar.splash_border_radius.

tab_alignment #

tab_alignment: TabAlignment | None = None

Overrides the default value for TabBar.tab_alignment.

unselected_label_color #

unselected_label_color: ColorValue | None = None

Overrides the default value for TabBar.unselected_label_color.

unselected_label_text_style #

unselected_label_text_style: TextStyle | None = None

Overrides the default value for TabBar.unselected_label_text_style.

Examples#

Example 1#

page.theme = ft.Theme(
    tabs_theme=ft.TabBarTheme(
        divider_color=ft.Colors.BLUE,
        indicator_color=ft.Colors.RED,
        indicator_tab_size=True,
        label_color=ft.Colors.GREEN,
        unselected_label_color=ft.Colors.AMBER,
        overlay_color={
            ft.MaterialState.FOCUSED: ft.Colors.with_opacity(0.2, ft.Colors.GREEN),
            ft.MaterialState.DEFAULT: ft.Colors.with_opacity(0.2, ft.Colors.PINK),
        },
    )
)