【Flet】詳細折り畳み機能の作り方

fletで詳細折り畳み機能を作れたので共有しておきます。
ちなみに、詳細折り畳み機能というのは

これです

ここに詳細な情報を書きます

コード

このクラスのインスタンスを作成して使うことを想定しています。
以下のサンプルコードをそのままコピペするとこんな感じになります。

項目名

　詳細情報

------------(Divider)

sample.py

import flet as ft

class ItemTemplate(ft.UserControl):
    def __init__(self, item, detail_content):
        super().__init__()
        self.item = item # 項目名
        self.detail_content = detail_content # 詳細情報
        self.detail_visible = False # 詳細情報の可視フラグ

    def build(self):
        # トグルボタンの設定
        self.toggle_icon = ft.Icon(name=ft.icons.ARROW_RIGHT, rotate=0, animate_rotation=100)

        # Dividerと詳細情報を交互に入れ替えて表示する
        self.detail = ft.AnimatedSwitcher(
            content=ft.Divider(),
            transition=ft.AnimatedSwitcherTransition.FADE,
            duration=100,
            reverse_duration=100
        )

        # コントロールの作成
        item_template = ft.Container(
            content=ft.Column(
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    ft.Container(
                        on_click=self.switch_toggle,
                        content=ft.Row(
                            controls=[
                                self.toggle_icon,
                                self.item,
                            ]
                        )
                    ),
                    self.detail
                ]
            )
        )

        return item_template

    # トグルボタンをクリックしたときの処理
    def switch_toggle(self, e):
        # 詳細が表示されていないとき
        if not self.detail_visible:
            # トグルアイコンを下向きに回転させる
            self.toggle_icon.rotate = 3.1415/2

            # Dividerの上に詳細情報を追加してcontentに設定する
            self.detail.content = ft.Column(controls=[ft.Container(content=self.detail_content, padding=ft.padding.only(left=30)), ft.Divider()], expand=True)
            
            # 表示の更新
            self.update()

        # 詳細が表示されている時
        else:
            # トグルボタンを右向きに回転させる
            self.toggle_icon.rotate = 0
            #詳細情報の代わりにDividerをcontentに設定する
            self.detail.content = ft.Divider()
            #表示の更新
            self.update()
        # 可視フラグの反転
        self.detail_visible = not self.detail_visible

def main(page: ft.Page):
    a = ItemTemplate(ft.Text("項目名"), ft.Text("詳細情報"))
    page.add(a)

ft.app(target=main)

参考にした公式リファレンス