v1: Declarative/Reactive approach in Flet

.appveyor.yml

@@ -10,7 +10,7 @@ skip_commits:
 
 environment:
   python_stack: python 3.12
-  FLUTTER_VERSION: 3.29.2
+  FLUTTER_VERSION: 3.32.2
   GITHUB_TOKEN:
     secure: 9SKIwc3VSfYJ5IChvNR74hQprJ0DRmcV9pPX+8KyE6IXIdfMsX6ikeUmMhJGRu3ztkZaF45jmU7Xn/6tauXQXhDBxK1N8kFHFSAnq6LjUXyhS0TZKX/H+jDozBeVbCXp
   TWINE_USERNAME: __token__
@@ -68,8 +68,8 @@ environment:
     - job_name: Build Flet for web
       job_group: build_flet
       job_depends_on: build_flet_package
-      PYODIDE_URL: https://github.com/pyodide/pyodide/releases/download/0.27.5/pyodide-core-0.27.5.tar.bz2
-      PYODIDE_CDN_URL: https://cdn.jsdelivr.net/pyodide/v0.27.5/full
+      PYODIDE_URL: https://github.com/pyodide/pyodide/releases/download/0.27.7/pyodide-core-0.27.7.tar.bz2
+      PYODIDE_CDN_URL: https://cdn.jsdelivr.net/pyodide/v0.27.7/full
       APPVEYOR_BUILD_WORKER_IMAGE: ubuntu2004
 
     - job_name: Test Python 3.10

client/.fvmrc

@@ -1,3 +1,3 @@
 {
-  "flutter": "3.29.0"
+  "flutter": "3.32.2"
 }

client/pubspec.lock

@@ -21,10 +21,10 @@ packages:
     dependency: transitive
     description:
       name: async
-      sha256: d2872f9c19731c2e5f10444b14686eb7cc85c76274bd6c16e1816bff9a3bab63
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
       url: "https://pub.dev"
     source: hosted
-    version: "2.12.0"
+    version: "2.13.0"
   audioplayers:
     dependency: transitive
     description:
@@ -189,10 +189,10 @@ packages:
     dependency: transitive
     description:
       name: fake_async
-      sha256: "6a95e56b2449df2273fd8c45a662d6947ce1ebb7aafe80e550a3f68297f3cacc"
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.2"
+    version: "1.3.3"
   ffi:
     dependency: transitive
     description:
@@ -377,10 +377,10 @@ packages:
     dependency: transitive
     description:
       name: intl
-      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
+      sha256: "3df61194eb431efc39c4ceba583b95633a403f46c9fd341e550ce0bfa50e9aa5"
       url: "https://pub.dev"
     source: hosted
-    version: "0.19.0"
+    version: "0.20.2"
   json_annotation:
     dependency: transitive
     description:
@@ -393,10 +393,10 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: c35baad643ba394b40aac41080300150a4f08fd0fd6a10378f8f7c6bc161acec
+      sha256: "6bb818ecbdffe216e81182c2f0714a2e62b593f4a4f13098713ff1685dfb6ab0"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.8"
+    version: "10.0.9"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
@@ -1014,10 +1014,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "0968250880a6c5fe7edc067ed0a13d4bae1577fe2771dcf3010d52c4a9d3ca14"
+      sha256: ddfa8d30d89985b96407efce8acbdd124701f96741f2d981ca860662f1c0dc02
       url: "https://pub.dev"
     source: hosted
-    version: "14.3.1"
+    version: "15.0.0"
   volume_controller:
     dependency: transitive
     description:
@@ -1070,10 +1070,10 @@ packages:
     dependency: transitive
     description:
       name: webdriver
-      sha256: "3d773670966f02a646319410766d3b5e1037efb7f07cc68f844d5e06cd4d61c8"
+      sha256: "2f3a14ca026957870cfd9c635b83507e0e51d8091568e90129fbf805aba7cade"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.4"
+    version: "3.1.0"
   webview_flutter_android:
     dependency: "direct overridden"
     description:

client/web/python.js

@@ -1,4 +1,4 @@
-const defaultPyodideUrl = "https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js";
+const defaultPyodideUrl = "https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js";
 
 let _apps = {};
 let _documentUrl = document.URL;

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

@@ -0,0 +1,19 @@
+import 'package:flutter/widgets.dart';
+
+import '../extensions/control.dart';
+import '../models/control.dart';
+import 'base_controls.dart';
+
+class ControlBuilderControl extends StatelessWidget {
+  final Control control;
+
+  const ControlBuilderControl({super.key, required this.control});
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("ControlBuilder.build: ${control.id}");
+    return BaseControl(
+        control: control,
+        child: control.buildWidget("content") ?? const SizedBox.shrink());
+  }
+}

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

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 
 import '../flet_backend.dart';
 import '../models/control.dart';
+import '../utils/keys.dart';
 import '../utils/numbers.dart';
 import '../utils/theme.dart';
 import '../widgets/control_inherited_notifier.dart';
@@ -15,21 +16,20 @@ class ControlWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Key? controlKey;
-    var key = control.getString("scroll_key", "")!;
-    if (key != "") {
-      if (key.startsWith("test:")) {
-        controlKey = Key(key.substring(5));
-      } else {
-        var globalKey = controlKey = GlobalKey();
-        FletBackend.of(context).globalKeys[key] = globalKey;
-      }
+    ControlKey? controlKey = control.getKey("key");
+    Key? key;
+    if (controlKey is ControlScrollKey) {
+      key = GlobalKey();
+      FletBackend.of(context).globalKeys[controlKey.toString()] =
+          key as GlobalKey;
+    } else if (controlKey != null) {
+      key = ValueKey(controlKey.value);
     }
 
     Widget? widget;
     if (control.get("_skip_inherited_notifier") == true) {
       for (var extension in FletBackend.of(context).extensions) {
-        widget = extension.createWidget(controlKey, control);
+        widget = extension.createWidget(key, control);
         if (widget != null) return widget;
       }
       widget = ErrorControl("Unknown control: ${control.type}");
@@ -41,7 +41,7 @@ class ControlWidget extends StatelessWidget {
 
           Widget? cw;
           for (var extension in FletBackend.of(context).extensions) {
-            cw = extension.createWidget(controlKey, control);
+            cw = extension.createWidget(key, control);
             if (cw != null) return cw;
           }
 

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

@@ -27,7 +27,8 @@ class _CupertinoNavigationBarControlState
 
   void _onTap(int index) {
     _selectedIndex = index;
-    widget.control.updateProperties({"selected_index": _selectedIndex});
+    widget.control
+        .updateProperties({"selected_index": _selectedIndex}, notify: true);
     widget.control.triggerEvent("change", _selectedIndex);
   }
 

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

@@ -30,7 +30,8 @@ class _NavigationRailControlState extends State<NavigationRailControl>
   void _destinationChanged(int index) {
     _selectedIndex = index;
     debugPrint("NavigationRail selected_index: $_selectedIndex");
-    widget.control.updateProperties({"selected_index": _selectedIndex});
+    widget.control
+        .updateProperties({"selected_index": _selectedIndex}, notify: true);
     widget.control.triggerEvent("change", _selectedIndex);
   }
 
@@ -88,7 +89,6 @@ class _NavigationRailControlState extends State<NavigationRailControl>
           destinations:
               widget.control.children("destinations").map((destinationControl) {
             destinationControl.notifyParent = true;
-            var label = destinationControl.getString("label", "")!;
             var icon = destinationControl.buildWidget("icon") ??
                 Icon(parseIcon(destinationControl.getString("icon")));
             var selectedIcon = destinationControl

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

@@ -1,6 +1,8 @@
 import 'package:flet/flet.dart';
 import 'package:flutter/material.dart';
 
+import '../utils/keys.dart';
+
 class ScrollableControl extends StatefulWidget {
   final Control control;
   final Widget child;
@@ -40,15 +42,16 @@ class _ScrollableControlState extends State<ScrollableControl>
     debugPrint("ScrollableControl.$name($args)");
     var offset = parseDouble(args["offset"]);
     var delta = parseDouble(args["delta"]);
-    var scrollKey = args["scroll_key"] != null
-        ? widget.control.backend.globalKeys[args["scroll_key"]]
+    var scrollKey = parseKey(args["scroll_key"]);
+    var globalKey = scrollKey != null
+        ? widget.control.backend.globalKeys[scrollKey.toString()]
         : null;
     switch (name) {
       case "scroll_to":
         var duration = parseDuration(args["duration"], Duration.zero)!;
         var curve = parseCurve(args["curve"], Curves.ease)!;
-        if (scrollKey != null) {
-          var ctx = scrollKey.currentContext;
+        if (globalKey != null) {
+          var ctx = globalKey.currentContext;
           if (ctx != null) {
             Scrollable.ensureVisible(ctx, duration: duration, curve: curve);
           }

packages/flet/lib/src/flet_backend.dart

@@ -210,7 +210,7 @@ class FletBackend extends ChangeNotifier {
       _reconnectDelayMs = 0;
       error = "";
 
-      page.applyPatch(resp.patch, this);
+      page.update(resp.patch);
 
       // drain send queue
       debugPrint("Send queue: ${_sendQueue.length}");
@@ -250,7 +250,7 @@ class FletBackend extends ChangeNotifier {
         }
 
         // update page details
-        page.applyPatch({"route": newRoute, "platform": platform}, this,
+        page.update({"route": newRoute, "platform": platform},
             shouldNotify: false);
 
         // connect to the server
@@ -362,7 +362,7 @@ class FletBackend extends ChangeNotifier {
     var control = controlsIndex.get(id);
     if (control != null) {
       if (dart) {
-        control.applyPatch(props, this, shouldNotify: notify);
+        control.update(props, shouldNotify: notify);
       }
       if (python) {
         _send(Message(
@@ -487,7 +487,7 @@ class FletBackend extends ChangeNotifier {
 
   _send(Message message, {bool unbuffered = false}) {
     if (unbuffered || !isLoading) {
-      debugPrint("_send: ${message.payload}");
+      debugPrint("_send: ${message.action} ${message.payload}");
       _backendChannel?.send(message);
     } else {
       _sendQueue.add(message);

packages/flet/lib/src/flet_core_extension.dart

@@ -18,11 +18,11 @@ import 'controls/bottom_app_bar.dart';
 import 'controls/bottom_sheet.dart';
 import 'controls/canvas.dart';
 import 'controls/card.dart';
-import 'controls/center.dart';
 import 'controls/chip.dart';
 import 'controls/circle_avatar.dart';
 import 'controls/column.dart';
 import 'controls/container.dart';
+import 'controls/control_builder.dart';
 import 'controls/cupertino_action_sheet.dart';
 import 'controls/cupertino_action_sheet_action.dart';
 import 'controls/cupertino_activity_indicator.dart';
@@ -158,8 +158,8 @@ class FletCoreExtension extends FletExtension {
         return CupertinoBottomSheetControl(key: key, control: control);
       case "PopupMenuButton":
         return PopupMenuButtonControl(key: key, control: control);
-      case "Center":
-        return CenterControl(key: key, control: control);
+      case "ControlBuilder":
+        return ControlBuilderControl(key: key, control: control);
       case "CupertinoSlidingSegmentedButton":
         return CupertinoSlidingSegmentedButtonControl(
             key: key, control: control);