Skip to main content

ExpansionPanelList

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

Examples

Live example

Simple Example

import flet as ft


def main(page: ft.Page):
def handle_change(e: ft.ControlEvent):
print(f"change on panel with index {e.data}")

def handle_delete(e: ft.ControlEvent):
panel.controls.remove(e.control.data)
page.update()

panel = 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(3):
exp = ft.ExpansionPanel(
bgcolor=colors[i % len(colors)],
header=ft.ListTile(title=ft.Text(f"Panel {i}")),
)

exp.content = ft.ListTile(
title=ft.Text(f"This is in Panel {i}"),
subtitle=ft.Text(f"Press the icon to delete panel {i}"),
trailing=ft.IconButton(ft.icons.DELETE, on_click=handle_delete, data=exp),
)

panel.controls.append(exp)

page.add(panel)


ft.app(target=main)

ExpansionPanelList Properties

controls

A list of ExpansionPanels to display inside ExpansionPanelList.

divider_color

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

elevation

Defines the elevation of the children controls (ExpansionPanels), while it is expanded. Default value is 2.

expanded_header_padding

Defines the padding around the header when expanded. Default value is padding.symmetric(vertical=16.0).

See Container.padding for more information and possible values.

expanded_icon_color

The color of the icon. Defaults to colors.BLACK_54 in light theme mode and colors.WHITE_60 in dark theme mode.

spacing

The size of the gap between the ExpansionPanels when expanded.

Events

on_change

Fires when an ExpansionPanel is expanded or collapsed. The event's data (e.data), contains the index of the ExpansionPanel which triggered this event.

ExpansionPanel properties

bgcolor

The background color of the panel.

content

The control to be found in the body of the ExpansionPanel. It is displayed below the header when the panel is expanded.

If this property is None, the ExpansionPanel will have a placeholder Text as content.

can_tap_header

If True, tapping on the panel's header will expand or collapse it. Defaults to False.

expanded

Whether expanded(True) or collapsed(False). Defaults to False.

The control to be found in the header of the ExpansionPanel. If can_tap_header is True, tapping on the header will expand or collapse the panel.

If this property is None, the ExpansionPanel will have a placeholder Text as header.