Refactor ListTile splash color property

Replaced 'bgcolor_activated' with 'splash_color' in ListTile control for both Dart and Python implementations to improve clarity and consistency. Updated integration tests to cover additional ListTile properties and added new golden images for toggle input scenarios.

Author: InesaFitsner

packages/flet/lib/src/controls/list_tile.dart

@@ -89,7 +89,7 @@ class ListTileControl extends StatelessWidget with FletStoreMixin {
       selectedColor: control.getColor("selected_color", context),
       focusColor: control.getColor("focus_color", context),
       tileColor: control.getColor("bgcolor", context),
-      splashColor: control.getColor("bgcolor_activated", context),
+      splashColor: control.getColor("splash_color", context),
       hoverColor: control.getColor("hover_color", context),
       iconColor: control.getColor("icon_color", context),
       textColor: control.getColor("text_color", context),

sdk/python/packages/flet/integration_tests/controls/golden/macos/list_tile/properties_2_hover.png

@@ -98,24 +98,114 @@ async def test_properties2(flet_app: ftt.FletTestApp, request):
 
     lt = ft.ListTile(
         key="lt",
-        title="List Tile",
+        title="List Tile without three line",
+        subtitle="Long Long Long Long Long Long Long Long Long Long Long "
+        "Long Long Long Long Long Long Long Long Long Long Long"
+        "Long Subtitle with is_three_line = False",
+        # is_three_line=True,
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        splash_color=ft.Colors.GREEN_200,  # is not shown on screenshot
+        hover_color=ft.Colors.YELLOW_200,
+    )
+
+    lt1 = ft.ListTile(
+        title="List Tile with three line",
+        subtitle="Long Long Long Long Long Long Long Long Long Long Long "
+        "Long Long Long Long Long Long Long Long Long Long Long"
+        "Long Subtitle with is_three_line = True",
+        is_three_line=True,  # not sure if this behaviour is correct or not.
+        # Tested it in flutter, it also shows more than 3 lines
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        splash_color=ft.Colors.GREEN_200,  # is not shown on screenshot
+        hover_color=ft.Colors.YELLOW_200,
+    )
+
+    lt2 = ft.ListTile(
+        title="List Tile with Compact visual density",
+        subtitle="Long Long Long Long Long Long Long Long Long Long Long "
+        "Long Long Long Long Long Long Long Long Long Long Long"
+        "Long Subtitle with is_three_line = False",
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        visual_density=ft.VisualDensity.COMPACT,
+    )
+
+    lt3 = ft.ListTile(
+        title="List Tile with horizontal spacing",
         subtitle="Subtitle",
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        splash_color=ft.Colors.GREEN_200,  # is not shown on screenshot
+        hover_color=ft.Colors.YELLOW_200,
+        horizontal_spacing=50,
+        title_alignment=ft.ListTileTitleAlignment.THREE_LINE,  # default value
+    )
+
+    lt4 = ft.ListTile(
+        title="List Tile with minimum leading width",
+        subtitle="Top Title Alignment",
         is_three_line=True,
         leading=ft.Icon(ft.Icons.STAR),
         trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
-        content_padding=ft.Padding.all(20),
         bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
-        bgcolor_activated=ft.Colors.GREEN_200,
+        splash_color=ft.Colors.GREEN_200,  # is not shown on screenshot
         hover_color=ft.Colors.YELLOW_200,
-        selected_color=ft.Colors.PINK_200,
-        selected_tile_color=ft.Colors.PURPLE_200,
-        selected=False,
-        toggle_inputs=True,
-        style=ft.ListTileStyle.DRAWER,
-        shape=ft.RoundedRectangleBorder(radius=10),
+        min_leading_width=100,
+        title_alignment=ft.ListTileTitleAlignment.TOP,  # default value
     )
 
-    flet_app.page.add(lt)
+    lt5 = ft.ListTile(
+        title="List Tile with minimum vertical padding",
+        subtitle="Center Title Alignment",
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        splash_color=ft.Colors.GREEN_200,  # is not shown on screenshot
+        hover_color=ft.Colors.YELLOW_200,
+        min_vertical_padding=30,
+        title_alignment=ft.ListTileTitleAlignment.CENTER,
+    )
+
+    lt6 = ft.ListTile(
+        title="List Tile with icon color and text color and styles",
+        subtitle="Bottom Title Alignment",
+        icon_color=ft.Colors.RED,
+        text_color=ft.Colors.PURPLE,
+        title_text_style=ft.TextStyle(size=20, weight=ft.FontWeight.BOLD),
+        subtitle_text_style=ft.TextStyle(size=10, italic=True),
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Icon(ft.Icons.ARROW_FORWARD),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        title_alignment=ft.ListTileTitleAlignment.BOTTOM,
+    )
+
+    lt7 = ft.ListTile(
+        title="List Tile with leading and trailing text style",
+        subtitle="Title Height Title Alignment",
+        icon_color=ft.Colors.RED,
+        leading=ft.Text("Leading"),
+        trailing=ft.Text("Trailing"),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        title_alignment=ft.ListTileTitleAlignment.TITLE_HEIGHT,
+    )
+
+    lt8 = ft.ListTile(
+        title="List Tile with minimum height",
+        subtitle="Title Height Title Alignment",
+        icon_color=ft.Colors.RED,
+        leading=ft.Text("Leading"),
+        trailing=ft.Text("Trailing"),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        min_height=150,
+    )
+
+    flet_app.page.add(lt, lt1, lt2, lt3, lt4, lt5, lt6, lt7, lt8)
     flet_app.page.update()
     await flet_app.tester.pump_and_settle()
 
@@ -127,8 +217,6 @@ async def test_properties2(flet_app: ftt.FletTestApp, request):
     )
 
     # test hover
-    flet_app.page.update()
-    await flet_app.tester.pump_and_settle()
     tile = await flet_app.tester.find_by_key("lt")
     assert tile.count == 1
     await flet_app.tester.mouse_hover(tile)
@@ -140,3 +228,56 @@ async def test_properties2(flet_app: ftt.FletTestApp, request):
             pixel_ratio=flet_app.screenshots_pixel_ratio
         ),
     )
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_toggle_inputs(flet_app: ftt.FletTestApp, request):
+    flet_app.page.enable_screenshots = True
+    flet_app.page.window.width = 400
+    flet_app.page.window.height = 600
+
+    lt = ft.ListTile(
+        key="lt",
+        title="ListTileStyle with toggle inputs",
+        subtitle="List",
+        leading=ft.Icon(ft.Icons.STAR),
+        trailing=ft.Checkbox(),
+        bgcolor=ft.Colors.LIGHT_BLUE_ACCENT_100,
+        style=ft.ListTileStyle.LIST,
+        toggle_inputs=True,
+    )
+
+    flet_app.page.add(lt)
+    flet_app.page.update()
+    await flet_app.tester.pump_and_settle()
+
+    flet_app.assert_screenshot(
+        "toggle_initial",
+        await flet_app.page.take_screenshot(
+            pixel_ratio=flet_app.screenshots_pixel_ratio
+        ),
+    )
+
+    # test click1
+    tile = await flet_app.tester.find_by_key("lt")
+    assert tile.count == 1
+    await flet_app.tester.tap(tile)
+    await flet_app.tester.pump_and_settle()
+
+    flet_app.assert_screenshot(
+        "toggle_click1",
+        await flet_app.page.take_screenshot(
+            pixel_ratio=flet_app.screenshots_pixel_ratio
+        ),
+    )
+
+    # test click2 - issue #5627
+    # await flet_app.tester.tap(tile)
+    # await flet_app.tester.pump_and_settle()
+
+    # flet_app.assert_screenshot(
+    #     "toggle_click2",
+    #     await flet_app.page.take_screenshot(
+    #         pixel_ratio=flet_app.screenshots_pixel_ratio
+    #     ),
+    # )

sdk/python/packages/flet/integration_tests/controls/golden/macos/list_tile/properties_2_normal.png

@@ -108,10 +108,9 @@ class ListTile(LayoutControl, AdaptiveControl):
     The list tile's background color.
     """
 
-    bgcolor_activated: Optional[str] = None
+    splash_color: Optional[ColorValue] = None
     """
-    The list tile's splash color after the
-    being was tapped.
+    The list tile's splash color after the control has been tapped.
     """
 
     hover_color: Optional[ColorValue] = None