ProgressRing

Author: FeodorFitsner

client/lib/controls/create_control.dart

@@ -1,24 +1,19 @@
-import 'dart:convert';
-
 import 'package:flet_view/controls/container.dart';
 import 'package:flet_view/controls/icon.dart';
 import 'package:flet_view/controls/image.dart';
 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';
 
 import '../models/control.dart';
 import '../models/control_view_model.dart';
 import '../models/app_state.dart';
-import '../utils/theme.dart';
 import 'grid_view.dart';
 import 'icon_button.dart';
 import 'outlined_button.dart';
+import 'progress_ring.dart';
 import 'row.dart';
 import 'text_button.dart';
 import 'textfield.dart';
@@ -51,6 +46,8 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
           return IconControl(control: controlView.control);
         case ControlType.image:
           return ImageControl(parent: parent, control: controlView.control);
+        case ControlType.progressRing:
+          return ProgressRingControl(control: controlView.control);
         case ControlType.elevatedButton:
           return ElevatedButtonControl(
               parent: parent,

client/lib/controls/progress_ring.dart

@@ -0,0 +1,34 @@
+import 'package:flet_view/controls/create_control.dart';
+import 'package:flet_view/utils/colors.dart';
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+
+class ProgressRingControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+
+  const ProgressRingControl({Key? key, this.parent, required this.control})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("ProgressRing build: ${control.id}");
+
+    var value = control.attrDouble("value", null);
+    var strokeWidth = control.attrDouble("strokeWidth", 4)!;
+    var color = HexColor.fromString(context, control.attrString("color", "")!);
+    var bgColor =
+        HexColor.fromString(context, control.attrString("bgColor", "")!);
+
+    return constrainedControl(
+        CircularProgressIndicator(
+          value: value,
+          strokeWidth: strokeWidth,
+          color: color,
+          backgroundColor: bgColor,
+        ),
+        parent,
+        control);
+  }
+}

docs/roadmap.md

@@ -12,7 +12,7 @@
     * [x] Column (flex - default mode, wrap)
     * [x] Stack
     * [x] ListView
-    * [ ] GridView
+    * [x] GridView
   * Basic controls
     * [x] Text
     * [x] Icon
@@ -547,9 +547,9 @@ Properties:
 
 - scrollDirection - `vertical` (default), `horizontal`.
 - padding
-- crossAxisCount
-- mainAxisSpacing
-- crossAxisSpacing
+- runsCount
+- spacing
+- runSpacing
 
 ## Card
 

sdk/python/flet/progress_ring.py

@@ -11,8 +11,6 @@
 except:
     from typing_extensions import Literal
 
-LabelPosition = Literal[None, "left", "top", "right", "bottom"]
-
 
 class ProgressRing(ConstrainedControl):
     def __init__(
@@ -29,8 +27,6 @@ def __init__(
         # Specific
         #
         value: OptionalNumber = None,
-        label: str = None,
-        label_position: LabelPosition = None,
         stroke_width: OptionalNumber = None,
         color: str = None,
         bgcolor: str = None,
@@ -47,8 +43,6 @@ def __init__(
             data=data,
         )
         self.value = value
-        self.label = label
-        self.label_position = label_position
         self.stroke_width = stroke_width
         self.color = color
         self.bgcolor = bgcolor
@@ -66,26 +60,7 @@ def value(self):
     def value(self, value: OptionalNumber):
         self._set_attr("value", value)
 
-    # label
-    @property
-    def label(self):
-        return self._get_attr("label")
-
-    @label.setter
-    def label(self, value):
-        self._set_attr("label", value)
-
-    # label_position
-    @property
-    def label_position(self):
-        return self._get_attr("labelPosition")
-
-    @label_position.setter
-    @beartype
-    def label_position(self, value: LabelPosition):
-        self._set_attr("label_position", value)
-
-    # bar_height
+    # stroke_width
     @property
     def stroke_width(self):
         return self._get_attr("strokeWidth")

sdk/python/playground/progress-indicators.py

@@ -0,0 +1,40 @@
+import logging
+from datetime import datetime
+from time import sleep
+
+import flet
+from flet import Column, ElevatedButton, Image, Page, Row, Text, Theme, padding
+from flet.progress_ring import ProgressRing
+from flet.stack import Stack
+
+# logging.basicConfig(level=logging.DEBUG)
+
+
+def main(page: Page):
+    page.title = "Images Example"
+    page.theme_mode = "light"
+    page.padding = padding.all(10)
+    page.update()
+
+    pr = ProgressRing(width=16, height=16, stroke_width=2)
+    r = Row([pr, Text("Wait for the completion...")])
+
+    pr2 = ProgressRing()
+    c = Column(
+        [pr2, Text("I'm going to run for ages...")], horizontal_alignment="center"
+    )
+
+    page.add(
+        Text("Circle progress indicator", style="headlineSmall"),
+        r,
+        Text("Indeterminate cicrular progress", style="headlineSmall"),
+        c,
+    )
+
+    for i in range(0, 101):
+        pr.value = i * 0.01
+        sleep(0.1)
+        page.update()
+
+
+flet.app(name="test1", port=8550, target=main, view=flet.WEB_BROWSER)