Skip to main content

ExpansionTile

A single-line ListTile with an expansion arrow icon that expands or collapses the tile to reveal or hide its children.

Examples​

Live example

import flet as ft


def main(page: ft.Page):
    page.spacing = 0
    page.theme_mode = ft.ThemeMode.LIGHT
    page.padding = ft.padding.only(top=0)

    def handle_expansion_tile_change(e):
        page.show_snack_bar(
            ft.SnackBar(ft.Text(f"ExpansionTile was {'expanded' if e.data=='true' else 'collapsed'}"), duration=1000)
        )
        if e.control.trailing:
            e.control.trailing.name = (
                ft.icons.ARROW_DROP_DOWN
                if e.control.trailing.name == ft.icons.ARROW_DROP_DOWN_CIRCLE
                else ft.icons.ARROW_DROP_DOWN_CIRCLE
            )
            page.update()

    page.add(
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 1"),
            subtitle=ft.Text("Trailing expansion arrow icon"),
            affinity=ft.TileAffinity.PLATFORM,
            maintain_state=True,
            collapsed_text_color=ft.colors.RED,
            text_color=ft.colors.RED,
            controls=[ft.ListTile(title=ft.Text("This is sub-tile number 1"))],
        ),
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 2"),
            subtitle=ft.Text("Custom expansion arrow icon"),
            trailing=ft.Icon(ft.icons.ARROW_DROP_DOWN),
            collapsed_text_color=ft.colors.GREEN,
            text_color=ft.colors.GREEN,
            on_change=handle_expansion_tile_change,
            controls=[ft.ListTile(title=ft.Text("This is sub-tile number 2"))],
        ),
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 3"),
            subtitle=ft.Text("Leading expansion arrow icon"),
            affinity=ft.TileAffinity.LEADING,
            initially_expanded=True,
            collapsed_text_color=ft.colors.BLUE,
            text_color=ft.colors.BLUE,
            controls=[
                ft.ListTile(title=ft.Text("This is sub-tile number 3")),
                ft.ListTile(title=ft.Text("This is sub-tile number 4")),
                ft.ListTile(title=ft.Text("This is sub-tile number 5")),
            ],
        ),
    )


ft.app(target=main)

Properties​

affinity​

Typically used to force the expansion arrow icon to the tile's leading or trailing edge.

Property value is TileAffinity enum with supported values:

  • LEADING
  • TRAILING
  • PLATFORM (default)

bgcolor​

The color to display behind the sublist when expanded.

controls​

The controls to be displayed when the tile expands. Typically ListTile controls.

controls_padding​

Defines the padding around the controls.

See Container.padding for more information and possible values.

clip_behavior​

The content will be clipped (or not) according to this option. Property value is ClipBehavior enum. See Container.clip_behavior for possible values.

Defaults to ClipBehavior.NONE.

collapsed_bgcolor​

Defines the background color of tile when the sublist is collapsed.

collapsed_icon_color​

The icon color of tile's expansion arrow icon when the sublist is collapsed.

collapsed_shape​

The tile's border shape when the sublist is collapsed. The value is an instance of type OutlinedBorder from which the below inherit:

  • StadiumBorder
  • RoundedRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • CircleBorder
  • BeveledRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • ContinuousRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.

collapsed_text_color​

The color of the tile's titles when the sublist is collapsed.

dense​

Whether this list tile is part of a vertically dense list. Dense list tiles default to a smaller height.

It is not recommended to set this property to True when in Material3.

Defaults to False.

enable_feedback​

Whether detected gestures should provide acoustic and/or haptic feedback. For example, on Android a tap will produce a clicking sound and a long-press will produce a short vibration, when feedback is enabled.

Defaults to True.

expanded_alignment​

Defines the alignment of children, which are arranged in a column when the tile is expanded.

See Container.alignment property for more information and possible values.

expanded_cross_axis_alignment​

Defines the alignment of each child control within controls when the tile is expanded.

Property value is CrossAxisAlignment enum with the following values:

  • START
  • CENTER (default)
  • END
  • STRETCH
  • BASELINE

icon_color​

The icon color of tile's expansion arrow icon when the sublist is expanded.

initially_expanded​

A boolean value which defines whether the tile is initially expanded or collapsed. Default value is False.

leading​

A Control to display before the title.

maintain_state​

A boolean value which defines whether the state of the controls is maintained when the tile expands and collapses. Default value is False.

shape​

The tile's border shape when the sublist is expanded. The value is an instance of type OutlinedBorder from which the below inherit:

  • StadiumBorder
  • RoundedRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • CircleBorder
  • BeveledRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.
  • ContinuousRectangleBorder
    • radius - border radius, an instance of BorderRadius class or a number.

subtitle​

Additional content displayed below the title. Typically a Text widget.

text_color​

The color of the tile's titles when the sublist is expanded.

tile_padding​

Defines the tile's padding. Default value is padding.symmetric(horizontal=16.0).

See Container.padding for more information and possible values.

title​

A Control to display as primary content of the tile. Typically a Text control.

trailing​

A Control to display after the title. Typically an Icon control.

visual_density​

Defines how compact the control's layout will be. Value is of ThemeVisualDensity enum: STANDARD, COMPACT, COMFORTABLE, ADAPTIVE_PLATFORM_DENSITY.

Events​

on_change​

Fires when a user clicks or taps the list tile.

on_long_press​

Fires when the user long-presses on this list tile.