How to remove the boder when ExpansionTile expanded？

[ryanrain2016]

there is a border on the top and the bottom when ExpansionTile expanded. How to remove them?

[ap4499]

Could you provide a minimal reproducible example of the code for this?

[ryanrain2016]

Could you provide a minimal reproducible example of the code for this?
The code is in docs of flet

import flet as ft


def main(page: ft.Page):
    page.spacing = 0
    page.padding = 0

    def handle_expansion_tile_change(e):
        page.open(
            ft.SnackBar(
                ft.Text(f"ExpansionTile was {'expanded' if e.data=='true' else 'collapsed'}"),
                duration=1000,
            )
        )
        if e.control.trailing:
            e.control.trailing.name = (
                ft.icons.ARROW_DROP_DOWN
                if e.control.trailing.name == ft.icons.ARROW_DROP_DOWN_CIRCLE
                else ft.icons.ARROW_DROP_DOWN_CIRCLE
            )
            page.update()

    page.add(
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 1"),
            subtitle=ft.Text("Trailing expansion arrow icon"),
            affinity=ft.TileAffinity.PLATFORM,
            maintain_state=True,
            collapsed_text_color=ft.colors.RED,
            text_color=ft.colors.RED,
            controls=[ft.ListTile(title=ft.Text("This is sub-tile number 1"))],
        ),
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 2"),
            subtitle=ft.Text("Custom expansion arrow icon"),
            trailing=ft.Icon(ft.icons.ARROW_DROP_DOWN),
            collapsed_text_color=ft.colors.GREEN,
            text_color=ft.colors.GREEN,
            on_change=handle_expansion_tile_change,
            controls=[ft.ListTile(title=ft.Text("This is sub-tile number 2"))],
        ),
        ft.ExpansionTile(
            title=ft.Text("ExpansionTile 3"),
            subtitle=ft.Text("Leading expansion arrow icon"),
            affinity=ft.TileAffinity.LEADING,
            initially_expanded=True,
            collapsed_text_color=ft.colors.BLUE,
            text_color=ft.colors.BLUE,
            controls=[
                ft.ListTile(title=ft.Text("This is sub-tile number 3")),
                ft.ListTile(title=ft.Text("This is sub-tile number 4")),
                ft.ListTile(title=ft.Text("This is sub-tile number 5")),
            ],
        ),
    )


ft.app(main)

[ap4499]

I can't see that there is a way.. and even in the underlying Flutter widget, it doesn't seem that there is an option either.

https://api.flutter.dev/flutter/material/ExpansionTile-class.html

That I can think of, there are two Flet native ways around it:

1. You could mimic the behaviour with a custom widget.. but this is a bit cumbersome

2. Have a look at this approach (for Flutter): https://widgettricks.substack.com/p/expansion-tile-customize

• We have the ability to control themes at the container level in Flet (https://flet.dev/docs/controls/container/#theme_mode)
• Flet theming, see "divider_theme" (https://flet.dev/docs/cookbook/theming)
• In this, although we seem to lack the opacity attribute found in native Flutter, we do have color. Set this to equal the same value as the global theme bg color should give the same effect.
  (https://flet.dev/docs/cookbook/theming/#dividertheme-class)

but in summary, I can't see how to remove it - or that it can be easily implemented in Flet. But you can make it not visible, by setting its color to be the same as whatever it is sat on/inside.

[ap4499]

#4310

There is a pull request to add in that Flutter opacity trick to be Flet native.

[ryanrain2016]

I just want to combine ExpansionTile, ListTile and ListView to make a TreeView. That's the last piece.