Is there a component for ExpansionTile / ExpansionPanel in Flet?

[ahkdigital]

Question

Hey, all!

I'm trying Flet out as an alternative to an app I've been working on in Dash. In Dash, I have access to the 'Accordion' and 'AccordionItems' which allow me to create collapsible lists. I looked up in Flutter and there seems to be an ExpansionTile and ExpansionPanelList/ExpansionPanel (see link) that function in a similar manner but I don't think they are listed as Flet components.

Can anyone point me in the right direction for accessing said components if they do exist within Flet OR how I could achieve an similar functionality with the existing toolset (i.e: would ListView work for this purpose)?

https://medium.com/flutter-community/flutter-expansion-collapse-view-fde9c51ac438

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Thanks for your interest!

I've just created two issues to implement ExpansionTile (#1719) and ExpansionPanel (#1718) controls.

In the meantime you can use Collapsible control I just hacked in pure Python:

from math import pi
from typing import Optional

import flet as ft

# Collapsible control


class Collapsible(ft.Column):
    def __init__(
        self,
        title: str,
        content: ft.Control,
        icon: Optional[ft.Control] = None,
        spacing: float = 3,
    ):
        super().__init__()
        self.icon = icon
        self.title = title
        self.shevron = ft.Icon(
            ft.icons.KEYBOARD_ARROW_DOWN_ROUNDED,
            animate_rotation=100,
            rotate=0,
        )
        self.content = ft.Column(
            [ft.Container(height=spacing), content],
            height=0,
            spacing=0,
            animate_size=100,
            opacity=0,
            animate_opacity=100,
        )
        self.spacing = 0

    def header_click(self, e):
        self.content.height = None if self.content.height == 0 else 0
        self.content.opacity = 0 if self.content.height == 0 else 1
        self.shevron.rotate = pi if self.shevron.rotate == 0 else 0
        self.update()

    def _build(self):
        title_row = ft.Row()
        if self.icon != None:
            title_row.controls.append(self.icon)
        title_row.controls.append(ft.Text(self.title))
        self.controls.extend(
            [
                ft.Container(
                    ft.Row(
                        [title_row, self.shevron],
                        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    ),
                    padding=ft.padding.only(left=8, right=8),
                    height=38,
                    border_radius=4,
                    ink=True,
                    on_click=self.header_click,
                ),
                self.content,
            ]
        )


# usage example


def main(page: ft.Page):
    page.add(
        Collapsible(
            "Introduction",
            icon=ft.Icon(ft.icons.WRAP_TEXT),
            content=ft.Column(
                [ft.Text("Line 1"), ft.Text("Line 2")],
                spacing=3,
            ),
        ),
        Collapsible(
            "Main content",
            icon=ft.Icon(ft.icons.BOOK),
            content=ft.Column(
                [ft.Text("Content 1"), ft.Text("Content 2")],
                spacing=3,
            ),
        ),
    )


ft.app(main)

Hope that helps.

[ahkdigital]

Awesome, @FeodorFitsner! Thank you so much! :D

[zouhx11]

Look forward to this widget class