`ListTile` ripple invisible when setting parent's `bgcolor`

[ndonkoHenri]

Description When clicking on the ListTiles (run code below), the ripple is not shown. This is because the bgcolor of the container the ListView is in. Removing this bgcolor, makes the ripple visible. Setting this property to any color, makes the issue visible.

Code example to reproduce the issue:

import flet as ft

def main(page: ft.Page):
    page.title = "ListTile Bug"
    page.theme_mode = "light"

    checkboxes = ft.ListView(
        controls=[
            ft.ListTile(title=ft.Text("Option 1"), trailing=ft.Checkbox(value=True, tristate=True), toggle_inputs=True),
            ft.ListTile(title=ft.Text("Option 2"), trailing=ft.Checkbox(value=True, tristate=True), toggle_inputs=True),
            ft.ListTile(title=ft.Text("Option 3"), trailing=ft.Checkbox(tristate=True), toggle_inputs=True),
            ft.ListTile(title=ft.Text("Option 4"), trailing=ft.Checkbox(value=False), disabled=True)
        ]
    )

    page.add(
        ft.Container(
            content=checkboxes,
            alignment=ft.alignment.center,
            border_radius=10,
            bgcolor=ft.colors.GREEN_400,
            padding=30
        )
    )

ft.app(target=main)

Describe the results you received: Clicking on the tiles, seems just like clicking on some text. No ripple.

Describe the results you expected: I expect the ripples to be shown when clicking on each tile. Running the example in the docs and clicking on the tiles shows the expected result.

Additional environment details: WIndows + latest pre

[ndonkoHenri]

I noticed something when clicking on the listtile in my app (not this code above): the ripple is somehow there (that space is the default's page padding) but simply hidden.

https://github.com/flet-dev/flet/assets/98978078/67e98411-5bdf-461d-bd50-b1e8808f5d20

[ndonkoHenri]

• reduce the opacity of the container's bgcolor
• and/or set bgcolor_activated

import flet as ft

def main(page: ft.Page):
    page.title = "ListTile Bug"
    page.theme_mode = "light"

    checkboxes = ft.ListView(
        controls=[
            ft.ListTile(
                title=ft.Text("Option 1"),
                trailing=ft.Checkbox(value=True, tristate=True),
                toggle_inputs=True,
                selected_tile_color=ft.colors.YELLOW,
            ),
            ft.ListTile(
                title=ft.Text(
                    "container-bgcolor-opacity 0.9 and bgcolor_activated set"
                ),
                bgcolor_activated=ft.colors.BLUE,
                trailing=ft.Checkbox(value=True, tristate=True),
                toggle_inputs=True,
            ),
            ft.ListTile(
                title=ft.Text("container-bgcolor-opacity 0.9"),
                trailing=ft.Checkbox(tristate=True),
                toggle_inputs=True,
            ),
        ]
    )

    page.add(
        ft.Container(
            content=checkboxes,
            alignment=ft.alignment.center,
            border_radius=10,
            bgcolor=ft.colors.with_opacity(0.9, ft.colors.GREEN), # reduced opacity for better visibility of the listtile ripple
            padding=30,
        ),
        checkboxes,
    )

ft.app(target=main)