ListTile

Author: FeodorFitsner

client/lib/controls/create_control.dart

@@ -1,4 +1,5 @@
 import 'card.dart';
+import 'list_tile.dart';
 import 'navigation_rail.dart';
 
 import 'package:flutter/material.dart';
@@ -161,6 +162,12 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
               control: controlView.control,
               children: controlView.children,
               parentDisabled: parentDisabled);
+        case ControlType.listTile:
+          return ListTileControl(
+              parent: parent,
+              control: controlView.control,
+              children: controlView.children,
+              parentDisabled: parentDisabled);
         case ControlType.listView:
           return ListViewControl(
               parent: parent,

client/lib/controls/list_tile.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/edge_insets.dart';
+import '../web_socket_client.dart';
+import 'create_control.dart';
+
+class ListTileControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+  final List<Control> children;
+  final bool parentDisabled;
+
+  const ListTileControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("ListTile build: ${control.id}");
+
+    var leadingCtrls =
+        children.where((c) => c.name == "leading" && c.isVisible);
+    var titleCtrls = children.where((c) => c.name == "title" && c.isVisible);
+    var subtitleCtrls =
+        children.where((c) => c.name == "subtitle" && c.isVisible);
+    var trailingCtrls =
+        children.where((c) => c.name == "trailing" && c.isVisible);
+
+    bool selected = control.attrBool("selected", false)!;
+    bool dense = control.attrBool("dense", false)!;
+    bool isThreeLine = control.attrBool("isThreeLine", false)!;
+    bool autofocus = control.attrBool("autofocus", false)!;
+    bool disabled = control.isDisabled || parentDisabled;
+
+    Function()? onPressed = disabled
+        ? null
+        : () {
+            debugPrint("ListTile ${control.id} clicked!");
+            ws.pageEventFromWeb(
+                eventTarget: control.id,
+                eventName: "click",
+                eventData: control.attrs["data"] ?? "");
+          };
+
+    ListTile tile = ListTile(
+      autofocus: autofocus,
+      contentPadding: parseEdgeInsets(control, "contentPadding"),
+      isThreeLine: isThreeLine,
+      selected: selected,
+      dense: dense,
+      onTap: onPressed,
+      leading: leadingCtrls.isNotEmpty
+          ? createControl(control, leadingCtrls.first.id, disabled)
+          : null,
+      title: titleCtrls.isNotEmpty
+          ? createControl(control, titleCtrls.first.id, disabled)
+          : null,
+      subtitle: subtitleCtrls.isNotEmpty
+          ? createControl(control, subtitleCtrls.first.id, disabled)
+          : null,
+      trailing: trailingCtrls.isNotEmpty
+          ? createControl(control, trailingCtrls.first.id, disabled)
+          : null,
+    );
+
+    return constrainedControl(tile, parent, control);
+  }
+}

sdk/python/flet/list_tile.py

@@ -31,6 +31,7 @@ def __init__(
         trailing: Control = None,
         is_three_line: bool = None,
         selected: bool = None,
+        dense: bool = None,
         autofocus: bool = None,
         on_click=None,
     ):
@@ -54,6 +55,7 @@ def __init__(
         self.trailing = trailing
         self.is_three_line = is_three_line
         self.selected = selected
+        self.dense = dense
         self.autofocus = autofocus
         self.on_click = on_click
 
@@ -149,6 +151,16 @@ def selected(self):
     def selected(self, value: Optional[bool]):
         self._set_attr("selected", value)
 
+    # dense
+    @property
+    def dense(self):
+        return self._get_attr("dense", data_type="bool", def_value=False)
+
+    @dense.setter
+    @beartype
+    def dense(self, value: Optional[bool]):
+        self._set_attr("dense", value)
+
     # autofocus
     @property
     def autofocus(self):

sdk/python/playground/list-tile-test.py

@@ -0,0 +1,85 @@
+import logging
+
+import flet
+from flet import (
+    Card,
+    Column,
+    Container,
+    Icon,
+    Image,
+    ListTile,
+    PopupMenuButton,
+    PopupMenuItem,
+    Text,
+    icons,
+    padding,
+)
+
+logging.basicConfig(level=logging.DEBUG)
+
+
+def main(page):
+    page.title = "ListTile Examples"
+    # page.theme_mode = "dark"
+    page.add(
+        Card(
+            content=Container(
+                width=500,
+                content=Column(
+                    [
+                        ListTile(
+                            title=Text("One-line list tile"),
+                        ),
+                        ListTile(title=Text("One-line dense list tile"), dense=True),
+                        ListTile(
+                            leading=Icon(icons.SETTINGS),
+                            title=Text("One-line selected list tile"),
+                            selected=True,
+                        ),
+                        ListTile(
+                            leading=Image(src="/icons/icon-192.png", fit="contain"),
+                            title=Text("One-line with leading control"),
+                        ),
+                        ListTile(
+                            title=Text("One-line with trailing control"),
+                            trailing=PopupMenuButton(
+                                icon=icons.MORE_VERT,
+                                items=[
+                                    PopupMenuItem(text="Item 1"),
+                                    PopupMenuItem(text="Item 2"),
+                                ],
+                            ),
+                        ),
+                        ListTile(
+                            leading=Icon(icons.ALBUM),
+                            title=Text("One-line with leading and trailing controls"),
+                            trailing=PopupMenuButton(
+                                icon=icons.MORE_VERT,
+                                items=[
+                                    PopupMenuItem(text="Item 1"),
+                                    PopupMenuItem(text="Item 2"),
+                                ],
+                            ),
+                        ),
+                        ListTile(
+                            leading=Icon(icons.SNOOZE),
+                            title=Text("Two-line with leading and trailing controls"),
+                            subtitle=Text("Here is a second title."),
+                            trailing=PopupMenuButton(
+                                icon=icons.MORE_VERT,
+                                items=[
+                                    PopupMenuItem(text="Item 1"),
+                                    PopupMenuItem(text="Item 2"),
+                                ],
+                            ),
+                        ),
+                    ],
+                    spacing=0,
+                ),
+                padding=padding.symmetric(vertical=10),
+            )
+        )
+    )
+
+
+flet.app(name="test1", port=8550, target=main, view=flet.WEB_BROWSER)