Skip to main content

TabBarTheme

Customizes the appearance of TabBar control across the app.

Properties

Properties​

divider_colorclass-attributeinstance-attribute​

divider_color: ColorValue | None = None

Overrides the default value for TabBar.divider_color.

divider_heightclass-attributeinstance-attribute​

divider_height: Number | None = None

Overrides the default value for TabBar.divider_height.

indicatorclass-attributeinstance-attribute​

indicator: UnderlineTabIndicator | None = None

Overrides the default value for TabBar.indicator.

indicator_animationclass-attributeinstance-attribute​

indicator_animation: TabIndicatorAnimation | None = None

Overrides the default value for TabBar.indicator_animation.

indicator_colorclass-attributeinstance-attribute​

indicator_color: ColorValue | None = None

Overrides the default value for TabBar.indicator_color.

indicator_sizeclass-attributeinstance-attribute​

indicator_size: TabBarIndicatorSize | None = None

Overrides the default value for TabBar.indicator_size.

label_colorclass-attributeinstance-attribute​

label_color: ColorValue | None = None

Overrides the default value for TabBar.label_color.

label_paddingclass-attributeinstance-attribute​

label_padding: PaddingValue | None = None

Overrides the default value for TabBar.label_padding.

label_text_styleclass-attributeinstance-attribute​

label_text_style: TextStyle | None = None

Overrides the default value for TabBar.label_text_style.

mouse_cursorclass-attributeinstance-attribute​

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

Overrides the default value for TabBar.mouse_cursor.

overlay_colorclass-attributeinstance-attribute​

overlay_color: ControlStateValue[ColorValue] | None = None

Overrides the default value for TabBar.overlay_color.

splash_border_radiusclass-attributeinstance-attribute​

splash_border_radius: BorderRadiusValue | None = None

Overrides the default value for TabBar.splash_border_radius.

tab_alignmentclass-attributeinstance-attribute​

tab_alignment: TabAlignment | None = None

Overrides the default value for TabBar.tab_alignment.

unselected_label_colorclass-attributeinstance-attribute​

unselected_label_color: ColorValue | None = None

Overrides the default value for TabBar.unselected_label_color.

unselected_label_text_styleclass-attributeinstance-attribute​

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),
        },
    )
)