Container control

Author: FeodorFitsner

client/lib/controls/container.dart

@@ -35,10 +35,13 @@ class ContainerControl extends StatelessWidget {
 
     return constrainedControl(
         Container(
-            color: bgColor,
             padding: parseEdgeInsets(control, "padding"),
             margin: parseEdgeInsets(control, "margin"),
             alignment: parseAlignment(control, "alignment"),
+            decoration: BoxDecoration(
+                color: bgColor,
+                border: parseBorder(context, control, "border"),
+                borderRadius: parseBorderRadius(control, "borderRadius")),
             child: createControl(control, contentCtrls.first.id, disabled)),
         parent,
         control);

client/lib/controls/create_control.dart

@@ -7,6 +7,7 @@ import 'package:flet_view/controls/list_view.dart';
 import 'package:flet_view/controls/snack_bar.dart';
 import 'package:flet_view/models/control_type.dart';
 import 'package:flet_view/utils/alignment.dart';
+import 'package:flet_view/utils/borders.dart';
 import 'package:flet_view/utils/edge_insets.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
@@ -235,3 +236,23 @@ Alignment? parseAlignment(Control control, String propName) {
   final j1 = json.decode(v);
   return alignmentFromJson(j1);
 }
+
+BorderRadius? parseBorderRadius(Control control, String propName) {
+  var v = control.attrString(propName, null);
+  if (v == null) {
+    return null;
+  }
+
+  final j1 = json.decode(v);
+  return borderRadiusFromJSON(j1);
+}
+
+Border? parseBorder(BuildContext context, Control control, String propName) {
+  var v = control.attrString(propName, null);
+  if (v == null) {
+    return null;
+  }
+
+  final j1 = json.decode(v);
+  return borderFromJSON(context, j1);
+}

client/lib/utils/borders.dart

@@ -0,0 +1,29 @@
+import 'package:flet_view/utils/colors.dart';
+import 'package:flutter/material.dart';
+
+BorderRadius borderRadiusFromJSON(Map<String, dynamic> json) {
+  return BorderRadius.only(
+    topLeft: Radius.circular(json['tl'] as double),
+    topRight: Radius.circular(json['tr'] as double),
+    bottomLeft: Radius.circular(json['bl'] as double),
+    bottomRight: Radius.circular(json['br'] as double),
+  );
+}
+
+Border borderFromJSON(BuildContext? context, Map<String, dynamic> json) {
+  return Border(
+      top: borderSideFromJSON(context, json['t']),
+      right: borderSideFromJSON(context, json['r']),
+      bottom: borderSideFromJSON(context, json['b']),
+      left: borderSideFromJSON(context, json['l']));
+}
+
+BorderSide borderSideFromJSON(
+    BuildContext? context, Map<String, dynamic> json) {
+  return BorderSide(
+      color: json['c'] != null
+          ? HexColor.fromString(context, json['c'] as String) ?? Colors.black
+          : Colors.black,
+      width: json['w'] ?? 1,
+      style: BorderStyle.solid);
+}

client/lib/utils/edge_insets.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/cupertino.dart';
 
 EdgeInsets edgeInsetsFromJson(Map<String, dynamic> json) {
-  return EdgeInsets.fromLTRB(json['left'] as double, json['top'] as double,
-      json['right'] as double, json['bottom'] as double);
+  return EdgeInsets.fromLTRB(json['l'] as double, json['t'] as double,
+      json['r'] as double, json['b'] as double);
 }

sdk/python/flet/alert_dialog.py

@@ -5,6 +5,7 @@
 
 from flet import padding
 from flet.control import Control, MainAxisAlignment, OptionalNumber, PaddingValue
+from flet.embed_json_encoder import EmbedJsonEncoder
 from flet.ref import Ref
 
 try:
@@ -111,7 +112,7 @@ def title_padding(self, value: PaddingValue):
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
         self._set_attr(
-            "titlePadding", json.dumps(value, default=vars) if value else None
+            "titlePadding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
         )
 
     # content
@@ -135,7 +136,7 @@ def content_padding(self, value: PaddingValue):
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
         self._set_attr(
-            "contentPadding", json.dumps(value, default=vars) if value else None
+            "contentPadding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
         )
 
     # actions
@@ -159,7 +160,7 @@ def actions_padding(self, value: PaddingValue):
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
         self._set_attr(
-            "actionsPadding", json.dumps(value, default=vars) if value else None
+            "actionsPadding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
         )
 
     # actions_alignment

sdk/python/flet/banner.py

@@ -5,6 +5,7 @@
 
 from flet import padding
 from flet.control import Control, MainAxisAlignment, OptionalNumber, PaddingValue
+from flet.embed_json_encoder import EmbedJsonEncoder
 from flet.ref import Ref
 
 try:
@@ -109,7 +110,7 @@ def leading_padding(self, value: PaddingValue):
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
         self._set_attr(
-            "leadingPadding", json.dumps(value, default=vars) if value else None
+            "leadingPadding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
         )
 
     # content
@@ -133,7 +134,7 @@ def content_padding(self, value: PaddingValue):
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
         self._set_attr(
-            "contentPadding", json.dumps(value, default=vars) if value else None
+            "contentPadding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
         )
 
     # actions

sdk/python/flet/border.py

@@ -0,0 +1,38 @@
+import dataclasses
+from typing import Union
+
+from beartype._decor.main import beartype
+
+
+@beartype
+@dataclasses.dataclass
+class BorderSide:
+    width: Union[None, float, int]
+    color: str = dataclasses.field(default=None)
+
+
+@beartype
+@dataclasses.dataclass
+class Border:
+    top: BorderSide
+    right: BorderSide
+    bottom: BorderSide
+    left: BorderSide
+
+
+def all(width: float = None, color: str = None):
+    bs = BorderSide(width, color)
+    return Border(left=bs, top=bs, right=bs, bottom=bs)
+
+
+def symmetric(vertical: BorderSide = None, horizontal: BorderSide = None):
+    return Border(left=horizontal, top=vertical, right=horizontal, bottom=vertical)
+
+
+def only(
+    left: BorderSide = None,
+    top: BorderSide = None,
+    right: BorderSide = None,
+    bottom: BorderSide = None,
+):
+    return Border(left=left, top=top, right=right, bottom=bottom)

sdk/python/flet/border_radius.py

@@ -0,0 +1,45 @@
+import dataclasses
+from typing import Union
+
+from beartype._decor.main import beartype
+
+
+@beartype
+@dataclasses.dataclass
+class BorderRadius:
+    topLeft: Union[float, int]
+    topRight: Union[float, int]
+    bottomLeft: Union[float, int]
+    bottomRight: Union[float, int]
+
+
+def all(value: float):
+    return BorderRadius(
+        topLeft=value, topRight=value, bottomLeft=value, bottomRight=value
+    )
+
+
+def horizontal(left: float = 0, right: float = 0):
+    return BorderRadius(
+        topLeft=left, topRight=right, bottomLeft=left, bottomRight=right
+    )
+
+
+def vertical(top: float = 0, bottom: float = 0):
+    return BorderRadius(
+        topLeft=top, topRight=top, bottomLeft=bottom, bottomRight=bottom
+    )
+
+
+def only(
+    topLeft: float = 0,
+    topRight: float = 0,
+    bottomLeft: float = 0,
+    bottomRight: float = 0,
+):
+    return BorderRadius(
+        topLeft=topLeft,
+        topRight=topRight,
+        bottomLeft=bottomLeft,
+        bottomRight=bottomRight,
+    )

sdk/python/flet/container.py

@@ -3,10 +3,13 @@
 
 from beartype import beartype
 
-from flet import margin, padding
+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.embed_json_encoder import EmbedJsonEncoder
 from flet.ref import Ref
 
 try:
@@ -34,10 +37,8 @@ def __init__(
         margin: MarginValue = None,
         alignment: Alignment = None,
         bgcolor: str = None,
-        border_color: str = None,
-        border_width: OptionalNumber = None,
-        border_style: BorderStyle = None,
-        border_radius: OptionalNumber = None,
+        border: Border = None,
+        border_radius: BorderRadius = None,
     ):
         ConstrainedControl.__init__(
             self,
@@ -56,9 +57,7 @@ def __init__(
         self.margin = margin
         self.alignment = alignment
         self.bgcolor = bgcolor
-        self.border_color = border_color
-        self.border_width = border_width
-        self.border_style = border_style
+        self.border = border
         self.border_radius = border_radius
 
     def _get_control_name(self):
@@ -92,7 +91,9 @@ def padding(self, value: PaddingValue):
         self.__padding = value
         if value and isinstance(value, (int, float)):
             value = padding.all(value)
-        self._set_attr("padding", json.dumps(value, default=vars) if value else None)
+        self._set_attr(
+            "padding", json.dumps(value, cls=EmbedJsonEncoder) if value else None
+        )
 
     # margin
     @property
@@ -105,7 +106,9 @@ def margin(self, value: MarginValue):
         self.__margin = value
         if value and isinstance(value, (int, float)):
             value = margin.all(value)
-        self._set_attr("margin", json.dumps(value, default=vars) if value else None)
+        self._set_attr(
+            "margin", json.dumps(value, cls=EmbedJsonEncoder) if value else None
+        )
 
     # bgcolor
     @property
@@ -116,43 +119,33 @@ def bgcolor(self):
     def bgcolor(self, value):
         self._set_attr("bgColor", value)
 
-    # border_color
+    # border
     @property
-    def border_color(self):
-        return self._get_attr("borderColor")
+    def border(self):
+        return self.__border
 
-    @border_color.setter
-    def border_color(self, value):
-        self._set_attr("borderColor", value)
-
-    # border_width
-    @property
-    def border_width(self) -> OptionalNumber:
-        return self._get_attr("borderWidth")
-
-    @border_width.setter
+    @border.setter
     @beartype
-    def border_width(self, value: OptionalNumber):
-        self._set_attr("borderWidth", value)
-
-    # border_style
-    @property
-    def border_style(self):
-        return self._get_attr("borderStyle")
-
-    @border_style.setter
-    @beartype
-    def border_style(self, value: BorderStyle):
-        self._set_attr("borderStyle", value)
+    def border(self, value: Optional[Border]):
+        self.__border = value
+        self._set_attr(
+            "border", json.dumps(value, cls=EmbedJsonEncoder) if value else None
+        )
 
     # border_radius
     @property
     def border_radius(self):
-        return self._get_attr("borderRadius")
+        return self.__border_radius
 
     @border_radius.setter
-    def border_radius(self, value):
-        self._set_attr("borderRadius", value)
+    @beartype
+    def border_radius(self, value: Optional[BorderRadius]):
+        self.__border_radius = value
+        if value and isinstance(value, (int, float)):
+            value = border_radius.all(value)
+        self._set_attr(
+            "borderRadius", json.dumps(value, cls=EmbedJsonEncoder) if value else None
+        )
 
     # content
     @property

sdk/python/flet/embed_json_encoder.py

@@ -0,0 +1,39 @@
+import json
+
+from flet.border import Border, BorderSide
+from flet.border_radius import BorderRadius
+from flet.margin import Margin
+from flet.padding import Padding
+
+
+class EmbedJsonEncoder(json.JSONEncoder):
+    def default(self, obj):
+        if isinstance(obj, BorderSide):
+            return {
+                "w": obj.width,
+                "c": obj.color,
+            }
+        elif isinstance(obj, Border):
+            return {
+                "l": obj.left,
+                "t": obj.top,
+                "r": obj.right,
+                "b": obj.bottom,
+            }
+        elif isinstance(obj, BorderRadius):
+            return {
+                "bl": obj.bottomLeft,
+                "br": obj.bottomRight,
+                "tl": obj.topLeft,
+                "tr": obj.topRight,
+            }
+        elif isinstance(obj, (Margin, Padding)):
+            return {
+                "l": obj.left,
+                "t": obj.top,
+                "r": obj.right,
+                "b": obj.bottom,
+            }
+        elif isinstance(obj, object):
+            return obj.__dict__
+        return json.JSONEncoder.default(self, obj)