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 class-attribute instance-attribute

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

A list of panels to display.

divider_color class-attribute instance-attribute

divider_color: ColorValue | None = None

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

elevation class-attribute instance-attribute

elevation: Number = 2

Defines the elevation of the controls, when expanded.

Raises:

• ValueError –

  If it is less than zero.

expand_icon_color class-attribute instance-attribute

expand_icon_color: ColorValue | None = None

The color of the icon.

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

expanded_header_padding class-attribute instance-attribute

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

Defines the padding around the header when expanded.

spacing class-attribute instance-attribute

spacing: Number | None = None

The size of the gap between the controlss when expanded.

Events

on_change class-attribute instance-attribute

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.