Card control

Author: FeodorFitsner

client/lib/controls/card.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/edge_insets.dart';
+import 'create_control.dart';
+
+class CardControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+  final List<Control> children;
+  final bool parentDisabled;
+
+  const CardControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("Card build: ${control.id}");
+
+    var contentCtrls =
+        children.where((c) => c.name == "content" && c.isVisible);
+    bool disabled = control.isDisabled || parentDisabled;
+
+    return constrainedControl(
+        Card(
+            elevation: control.attrDouble("elevation"),
+            margin: parseEdgeInsets(control, "margin"),
+            child: contentCtrls.isNotEmpty
+                ? createControl(control, contentCtrls.first.id, disabled)
+                : null),
+        parent,
+        control);
+  }
+}

client/lib/controls/create_control.dart

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

client/lib/models/control_type.dart

@@ -2,6 +2,7 @@ enum ControlType {
   alertDialog,
   appBar,
   banner,
+  card,
   checkbox,
   circleAvatar,
   clipboard,
@@ -16,6 +17,7 @@ enum ControlType {
   icon,
   iconButton,
   image,
+  listTile,
   listView,
   navigationRail,
   navigationRailDestination,

sdk/python/flet/__init__.py

@@ -1,6 +1,7 @@
 from flet.alert_dialog import AlertDialog
 from flet.app_bar import AppBar
 from flet.banner import Banner
+from flet.card import Card
 from flet.checkbox import Checkbox
 from flet.circle_avatar import CircleAvatar
 from flet.column import Column
@@ -17,6 +18,7 @@
 from flet.icon import Icon
 from flet.icon_button import IconButton
 from flet.image import Image
+from flet.list_tile import ListTile
 from flet.list_view import ListView
 from flet.navigation_rail import NavigationRail, NavigationRailDestination
 from flet.outlined_button import OutlinedButton

sdk/python/flet/card.py

@@ -0,0 +1,96 @@
+from typing import Optional, Union
+
+from beartype import beartype
+
+from flet import border_radius, margin, padding
+from flet.alignment import Alignment
+from flet.border import Border
+from flet.border_radius import BorderRadius
+from flet.constrained_control import ConstrainedControl
+from flet.control import BorderStyle, Control, MarginValue, OptionalNumber, PaddingValue
+from flet.ref import Ref
+
+try:
+    from typing import Literal
+except:
+    from typing_extensions import Literal
+
+
+class Card(ConstrainedControl):
+    def __init__(
+        self,
+        ref: Ref = None,
+        width: OptionalNumber = None,
+        height: OptionalNumber = None,
+        expand: Union[bool, int] = None,
+        opacity: OptionalNumber = None,
+        tooltip: str = None,
+        visible: bool = None,
+        disabled: bool = None,
+        data: any = None,
+        #
+        # Specific
+        #
+        content: Control = None,
+        margin: MarginValue = None,
+        elevation: OptionalNumber = None,
+    ):
+        ConstrainedControl.__init__(
+            self,
+            ref=ref,
+            width=width,
+            height=height,
+            expand=expand,
+            opacity=opacity,
+            tooltip=tooltip,
+            visible=visible,
+            disabled=disabled,
+            data=data,
+        )
+
+        self.content = content
+        self.margin = margin
+        self.elevation = elevation
+
+    def _get_control_name(self):
+        return "card"
+
+    def _get_children(self):
+        children = []
+        if self.__content != None:
+            self.__content._set_attr_internal("n", "content")
+            children.append(self.__content)
+        return children
+
+    # margin
+    @property
+    def margin(self):
+        return self.__margin
+
+    @margin.setter
+    @beartype
+    def margin(self, value: MarginValue):
+        self.__margin = value
+        if value and isinstance(value, (int, float)):
+            value = margin.all(value)
+        self._set_attr_json("margin", value)
+
+    # elevation
+    @property
+    def elevation(self) -> OptionalNumber:
+        return self._get_attr("elevation")
+
+    @elevation.setter
+    @beartype
+    def elevation(self, value: OptionalNumber):
+        self._set_attr("elevation", value)
+
+    # content
+    @property
+    def content(self):
+        return self.__content
+
+    @content.setter
+    @beartype
+    def content(self, value: Optional[Control]):
+        self.__content = value

sdk/python/flet/list_tile.py

@@ -0,0 +1,169 @@
+from typing import Optional, Union
+
+from beartype import beartype
+
+from flet import padding
+from flet.constrained_control import ConstrainedControl
+from flet.control import Control, OptionalNumber, PaddingValue
+from flet.ref import Ref
+
+
+class ListTile(ConstrainedControl):
+    def __init__(
+        self,
+        text: str = None,
+        ref: Ref = None,
+        width: OptionalNumber = None,
+        height: OptionalNumber = None,
+        expand: Union[bool, int] = None,
+        opacity: OptionalNumber = None,
+        tooltip: str = None,
+        visible: bool = None,
+        disabled: bool = None,
+        data: any = None,
+        #
+        # Specific
+        #
+        content_padding: PaddingValue = None,
+        leading: Control = None,
+        title: Control = None,
+        subtitle: Control = None,
+        trailing: Control = None,
+        is_three_line: bool = None,
+        selected: bool = None,
+        autofocus: bool = None,
+        on_click=None,
+    ):
+        ConstrainedControl.__init__(
+            self,
+            ref=ref,
+            width=width,
+            height=height,
+            expand=expand,
+            opacity=opacity,
+            tooltip=tooltip,
+            visible=visible,
+            disabled=disabled,
+            data=data,
+        )
+
+        self.content_padding = content_padding
+        self.leading = leading
+        self.title = title
+        self.subtitle = subtitle
+        self.trailing = trailing
+        self.is_three_line = is_three_line
+        self.selected = selected
+        self.autofocus = autofocus
+        self.on_click = on_click
+
+    def _get_control_name(self):
+        return "listtile"
+
+    def _get_children(self):
+        children = []
+        if self.__leading:
+            self.__leading._set_attr_internal("n", "leading")
+            children.append(self.__leading)
+        if self.__title:
+            self.__title._set_attr_internal("n", "title")
+            children.append(self.__title)
+        if self.__subtitle:
+            self.__subtitle._set_attr_internal("n", "subtitle")
+            children.append(self.__subtitle)
+        if self.__trailing:
+            self.__trailing._set_attr_internal("n", "trailing")
+            children.append(self.__trailing)
+        return children
+
+    # content_padding
+    @property
+    def content_padding(self):
+        return self.__content_padding
+
+    @content_padding.setter
+    @beartype
+    def content_padding(self, value: PaddingValue):
+        self.__content_padding = value
+        if value and isinstance(value, (int, float)):
+            value = padding.all(value)
+        self._set_attr_json("contentPadding", value)
+
+    # leading
+    @property
+    def leading(self):
+        return self.__leading
+
+    @leading.setter
+    @beartype
+    def leading(self, value: Optional[Control]):
+        self.__leading = value
+
+    # title
+    @property
+    def title(self):
+        return self.__title
+
+    @title.setter
+    @beartype
+    def title(self, value: Optional[Control]):
+        self.__title = value
+
+    # subtitle
+    @property
+    def subtitle(self):
+        return self.__subtitle
+
+    @subtitle.setter
+    @beartype
+    def subtitle(self, value: Optional[Control]):
+        self.__subtitle = value
+
+    # trailing
+    @property
+    def trailing(self):
+        return self.__trailing
+
+    @trailing.setter
+    @beartype
+    def trailing(self, value: Optional[Control]):
+        self.__trailing = value
+
+    # is_three_line
+    @property
+    def is_three_line(self):
+        return self._get_attr("isThreeLine", data_type="bool", def_value=False)
+
+    @is_three_line.setter
+    @beartype
+    def is_three_line(self, value: Optional[bool]):
+        self._set_attr("isThreeLine", value)
+
+    # selected
+    @property
+    def selected(self):
+        return self._get_attr("selected", data_type="bool", def_value=False)
+
+    @selected.setter
+    @beartype
+    def selected(self, value: Optional[bool]):
+        self._set_attr("selected", value)
+
+    # autofocus
+    @property
+    def autofocus(self):
+        return self._get_attr("autofocus", data_type="bool", def_value=False)
+
+    @autofocus.setter
+    @beartype
+    def autofocus(self, value: Optional[bool]):
+        self._set_attr("autofocus", value)
+
+    # on_click
+    @property
+    def on_click(self):
+        return self._get_event_handler("click")
+
+    @on_click.setter
+    def on_click(self, handler):
+        self._add_event_handler("click", handler)

sdk/python/playground/card-test.py

@@ -0,0 +1,22 @@
+import flet
+from flet import Card, Container, Text
+
+
+def main(page):
+    page.title = "Card Examples"
+    # page.theme_mode = "dark"
+    page.add(
+        Card(
+            content=Container(
+                content=Text("A regular card with padded content"), padding=10
+            ),
+            margin=0,
+        ),
+        Card(
+            content=Container(content=Text("A card with custom elevation"), padding=10),
+            elevation=5,
+        ),
+    )
+
+
+flet.app(name="test1", port=8550, target=main, view=flet.WEB_BROWSER)