ExpansionPanelList

A material expansion panel list that lays out its children and animates expansions.

ft.ExpansionPanelList(
    width=400,
    controls=[
        ft.ExpansionPanel(
            header=ft.Text("Details"),
            content=ft.Text("More information here"),
            expanded=True,
        ),
        ft.ExpansionPanel(
            header=ft.Text("History"),
            content=ft.Text("View previous updates"),
        ),
    ],
)

Basic ExpansionPanelList

Inherits: LayoutControl

Properties

• controls(list[ExpansionPanel]) –

  A list of panels to display.

• divider_color(ColorValue | None) –

  The color of the divider when

• elevation(Number) –

  Defines the elevation of the controls, when expanded.

• expand_icon_color(ColorValue | None) –

  The color of the icon.

• expanded_header_padding(PaddingValue) –

  Defines the padding around the header when expanded.

• spacing(Number | None) –

  The size of the gap between the controlss when expanded.

Events

• on_change(ControlEventHandler[ExpansionPanelList] | None) –

  Called when an item of controls is expanded or collapsed.

Examples

Live example

Basic Example

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT

    def handle_change(e: ft.Event[ft.ExpansionPanelList]):
        print(f"change on panel with index {e.data}")

    def handle_delete(e: ft.Event[ft.IconButton]):
        icon_button = e.control
        tile = icon_button.parent
        panel = tile.parent

        panel_list.controls.remove(panel)
        page.update()

    panel_list = ft.ExpansionPanelList(
        expand_icon_color=ft.Colors.AMBER,
        elevation=8,
        divider_color=ft.Colors.AMBER,
        on_change=handle_change,
        controls=[
            ft.ExpansionPanel(
                # has no header and content - placeholders will be used
                bgcolor=ft.Colors.BLUE_400,
                expanded=True,
            ),
        ],
    )

    colors = [
        ft.Colors.GREEN_500,
        ft.Colors.BLUE_800,
        ft.Colors.RED_800,
    ]

    for i in range(len(colors)):
        bgcolor = colors[i % len(colors)]
        panel_list.controls.append(
            ft.ExpansionPanel(
                bgcolor=bgcolor,
                header=ft.ListTile(title=ft.Text(f"Panel {i}"), bgcolor=bgcolor),
                content=ft.ListTile(
                    bgcolor=bgcolor,
                    title=ft.Text(f"This is in Panel {i}"),
                    subtitle=ft.Text(f"Press the icon to delete panel {i}"),
                    trailing=ft.IconButton(
                        icon=ft.Icons.DELETE,
                        on_click=handle_delete,
                    ),
                ),
            )
        )

    page.add(panel_list)


ft.run(main)

Properties

controls

controls: list[ExpansionPanel] = field(default_factory=list)

A list of panels to display.

divider_color

divider_color: ColorValue | None = None

The color of the divider when ExpansionPanel.expanded is False.

elevation

elevation: Number = 2

Defines the elevation of the controls, when expanded.

Raises:

• ValueError –

  If it is less than zero.

expand_icon_color

expand_icon_color: ColorValue | None = None

The color of the icon.

Defaults to [Colors.BLACK_54][flet.Colors.BLACK_54] in light theme mode and [Colors.WHITE_60][flet.Colors.WHITE_60] in dark theme mode.

expanded_header_padding

expanded_header_padding: PaddingValue = field(
    default_factory=lambda: symmetric(vertical=16.0)
)

Defines the padding around the header when expanded.

spacing

spacing: Number | None = None

The size of the gap between the controlss when expanded.

Events

on_change

on_change: (
    ControlEventHandler[ExpansionPanelList] | None
) = None

Called when an item of controls is expanded or collapsed.

The data property of the event handler argument contains the index of the child panel (in controls) which triggered this event.