Misc control improvements - S1 (#144)

* TextField and Dropdown formatting

Fix #108, #132, #134, #100, #101

* Switch Flutter to master channel

* Fix Flutter tests

* Fixed dropdown text style for windows

* Switch Flutter to dev channel

* Allow partial theme and other JSON prop updates

Fix #77

* Changing app host/IP binding

Fix #98

* Fix #138: page.width and page.height are 0 on the first page load

* Fix #137 scroll=hidden support

* Fix #140: Container on_click callback breaks containers without explicit size

* Long press support for buttons, container and listtile

Fix #135

* Fixed long press event handlers for buttons

* Gradients support in Container

Close #123

* Fix container gradient

* ButtonStyle POC - python side

* ButtonStyle partially works

* ButtonStyle almost done

* Python files cleanup

* All buttons have style

* iconbutton.selected added

* Fixed entry controls focus() method

* Some cleanup

* Fix elevated button style

Author: FeodorFitsner

.appveyor.yml

@@ -95,7 +95,8 @@ for:
     install:
       - ps: .\ci\install_flutter.ps1
       - set PATH=C:\flutter\bin;%PATH%
-      - flutter --version
+      - flutter channel dev
+      - flutter upgrade
 
     build_script:
       - cd client
@@ -138,7 +139,8 @@ for:
       - curl https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.0.3-stable.zip -o flutter_macos_stable.zip
       - unzip -qq flutter_macos_stable.zip
       - export PATH="$PATH:`pwd`/flutter/bin"
-      - flutter --version
+      - flutter channel dev
+      - flutter upgrade
       - flutter config --enable-macos-desktop
       - flutter doctor
 
@@ -172,8 +174,9 @@ for:
     install:
       # Flutter SDK
       - sudo snap install flutter --classic
+      - flutter channel dev
+      - flutter upgrade
       - flutter sdk-path
-      - flutter --version
 
     build_script:
       - cd client
@@ -207,7 +210,8 @@ for:
       - curl https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.0.3-stable.zip -o flutter_macos_stable.zip
       - unzip -qq flutter_macos_stable.zip
       - export PATH="$PATH:`pwd`/flutter/bin"
-      - flutter --version
+      - flutter channel dev
+      - flutter upgrade
       - flutter doctor
 
     build_script:
@@ -249,8 +253,9 @@ for:
     install:
       # Flutter SDK
       - sudo snap install flutter --classic
+      - flutter channel dev
+      - flutter upgrade
       - flutter sdk-path
-      - flutter --version
 
       # Go and GoReleaser
       - gvm install go${GO_VERSION} -B

client/.gitignore

@@ -32,7 +32,6 @@
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Symbolication related
 app.*.symbols
@@ -46,4 +45,4 @@ app.*.map.json
 /android/app/release
 
 # Ruby
-vendor/
+vendor/

client/lib/actions.dart

@@ -26,7 +26,8 @@ class PageReconnectingAction {
 
 class PageSizeChangeAction {
   final Size newPageSize;
-  PageSizeChangeAction(this.newPageSize);
+  final WindowMediaData? wmd;
+  PageSizeChangeAction(this.newPageSize, this.wmd);
 }
 
 class SetPageRouteAction {

client/lib/controls/alert_dialog.dart

@@ -69,8 +69,7 @@ class _AlertDialogControlState extends State<AlertDialogControl> {
       actions: actionCtrls
           .map((c) => createControl(widget.control, c.id, disabled))
           .toList(),
-      actionsPadding:
-          parseEdgeInsets(widget.control, "actionsPadding") ?? EdgeInsets.zero,
+      actionsPadding: parseEdgeInsets(widget.control, "actionsPadding"),
       actionsAlignment: actionsAlignment,
     );
   }

client/lib/controls/container.dart

@@ -5,6 +5,7 @@ import '../utils/alignment.dart';
 import '../utils/borders.dart';
 import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
+import '../utils/gradient.dart';
 import '../web_socket_client.dart';
 import 'create_control.dart';
 
@@ -32,30 +33,43 @@ class ContainerControl extends StatelessWidget {
         children.where((c) => c.name == "content" && c.isVisible);
     bool ink = control.attrBool("ink", false)!;
     bool onClick = control.attrBool("onclick", false)!;
+    bool onLongPress = control.attrBool("onLongPress", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     var boxDecor = BoxDecoration(
         color: bgColor,
+        gradient: parseGradient(Theme.of(context), control, "gradient"),
         border: parseBorder(Theme.of(context), control, "border"),
         borderRadius: parseBorderRadius(control, "borderRadius"));
 
     Widget? child = contentCtrls.isNotEmpty
         ? createControl(control, contentCtrls.first.id, disabled)
         : null;
 
-    if (onClick && ink) {
+    if ((onClick || onLongPress) && ink) {
       return constrainedControl(
           Container(
             margin: parseEdgeInsets(control, "margin"),
             child: Ink(
                 child: InkWell(
-                    onTap: () {
-                      debugPrint("Container ${control.id} clicked!");
-                      ws.pageEventFromWeb(
-                          eventTarget: control.id,
-                          eventName: "click",
-                          eventData: control.attrs["data"] ?? "");
-                    },
+                    onTap: onClick
+                        ? () {
+                            debugPrint("Container ${control.id} clicked!");
+                            ws.pageEventFromWeb(
+                                eventTarget: control.id,
+                                eventName: "click",
+                                eventData: control.attrs["data"] ?? "");
+                          }
+                        : null,
+                    onLongPress: onLongPress
+                        ? () {
+                            debugPrint("Container ${control.id} long pressed!");
+                            ws.pageEventFromWeb(
+                                eventTarget: control.id,
+                                eventName: "long_press",
+                                eventData: control.attrs["data"] ?? "");
+                          }
+                        : null,
                     child: Container(
                       child: child,
                       padding: parseEdgeInsets(control, "padding"),
@@ -67,33 +81,41 @@ class ContainerControl extends StatelessWidget {
           parent,
           control);
     } else {
-      var container = constrainedControl(
-          Container(
-              padding: parseEdgeInsets(control, "padding"),
-              margin: parseEdgeInsets(control, "margin"),
-              alignment: parseAlignment(control, "alignment"),
-              decoration: boxDecor,
-              child: child),
-          parent,
-          control);
-      if (onClick) {
-        return MouseRegion(
+      Widget container = Container(
+          padding: parseEdgeInsets(control, "padding"),
+          margin: parseEdgeInsets(control, "margin"),
+          alignment: parseAlignment(control, "alignment"),
+          decoration: boxDecor,
+          child: child);
+
+      if (onClick || onLongPress) {
+        container = MouseRegion(
           cursor: SystemMouseCursors.click,
           child: GestureDetector(
             child: container,
-            onTapDown: (details) {
-              debugPrint("Container ${control.id} clicked!");
-              ws.pageEventFromWeb(
-                  eventTarget: control.id,
-                  eventName: "click",
-                  eventData: control.attrString("data", "")! +
-                      "${details.localPosition.dx}:${details.localPosition.dy} ${details.globalPosition.dx}:${details.globalPosition.dy}");
-            },
+            onTapDown: onClick
+                ? (details) {
+                    debugPrint("Container ${control.id} clicked!");
+                    ws.pageEventFromWeb(
+                        eventTarget: control.id,
+                        eventName: "click",
+                        eventData: control.attrString("data", "")! +
+                            "${details.localPosition.dx}:${details.localPosition.dy} ${details.globalPosition.dx}:${details.globalPosition.dy}");
+                  }
+                : null,
+            onLongPress: onLongPress
+                ? () {
+                    debugPrint("Container ${control.id} clicked!");
+                    ws.pageEventFromWeb(
+                        eventTarget: control.id,
+                        eventName: "long_press",
+                        eventData: control.attrs["data"] ?? "");
+                  }
+                : null,
           ),
         );
-      } else {
-        return container;
       }
+      return constrainedControl(container, parent, control);
     }
   }
 }

client/lib/controls/dropdown.dart

@@ -8,6 +8,8 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/control_children_view_model.dart';
 import '../protocol/update_control_props_payload.dart';
+import '../utils/borders.dart';
+import '../utils/colors.dart';
 import '../web_socket_client.dart';
 import 'create_control.dart';
 import 'form_field.dart';
@@ -30,12 +32,16 @@ class DropdownControl extends StatefulWidget {
 
 class _DropdownControlState extends State<DropdownControl> {
   String? _value;
+  bool _focused = false;
   final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
     _focusNode.addListener(() {
+      setState(() {
+        _focused = _focusNode.hasFocus;
+      });
       ws.pageEventFromWeb(
           eventTarget: widget.control.id,
           eventName: _focusNode.hasFocus ? "focus" : "blur",
@@ -58,6 +64,21 @@ class _DropdownControlState extends State<DropdownControl> {
           bool autofocus = widget.control.attrBool("autofocus", false)!;
           bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
+          var textSize = widget.control.attrDouble("textSize");
+
+          var color = HexColor.fromString(
+              Theme.of(context), widget.control.attrString("color", "")!);
+          var focusedColor = HexColor.fromString(Theme.of(context),
+              widget.control.attrString("focusedColor", "")!);
+
+          TextStyle? textStyle;
+          if (textSize != null || color != null || focusedColor != null) {
+            textStyle = TextStyle(
+                fontSize: textSize,
+                color: (_focused ? focusedColor ?? color : color) ??
+                    Theme.of(context).colorScheme.onSurface);
+          }
+
           var items = itemsView.children
               .where((c) => c.name == null)
               .map<DropdownMenuItem<String>>(
@@ -96,15 +117,21 @@ class _DropdownControlState extends State<DropdownControl> {
             }
           }
 
+          var borderRadius = parseBorderRadius(widget.control, "borderRadius");
+
           Widget dropDown = DropdownButtonFormField<String>(
+            style: textStyle,
             autofocus: autofocus,
             focusNode: _focusNode,
             value: _value,
+            borderRadius: borderRadius,
             decoration: buildInputDecoration(
+                context,
                 widget.control,
                 prefixControls.isNotEmpty ? prefixControls.first : null,
                 suffixControls.isNotEmpty ? suffixControls.first : null,
-                null),
+                null,
+                _focused),
             onChanged: (String? value) {
               debugPrint("Dropdown selected value: $value");
               setState(() {

client/lib/controls/elevated_button.dart

@@ -1,3 +1,4 @@
+import 'package:flet_view/utils/buttons.dart';
 import 'package:flutter/material.dart';
 
 import '../models/control.dart';
@@ -47,23 +48,39 @@ class ElevatedButtonControl extends StatelessWidget {
                 eventData: control.attrs["data"] ?? "");
           };
 
+    Function()? onLongPress = disabled
+        ? null
+        : () {
+            debugPrint("Button ${control.id} long pressed!");
+            ws.pageEventFromWeb(
+                eventTarget: control.id,
+                eventName: "long_press",
+                eventData: control.attrs["data"] ?? "");
+          };
+
     ElevatedButton? button;
-    ButtonStyle? style;
 
-    if (color != null || bgcolor != null || elevation != null) {
-      style = ElevatedButton.styleFrom(
-        // Foreground color
-        onPrimary: color,
-        // Background color
-        primary: bgcolor,
-      ).copyWith(elevation: ButtonStyleButton.allOrNull(elevation));
-    }
+    var theme = Theme.of(context);
+
+    var style = parseButtonStyle(Theme.of(context), control, "style",
+        defaultForegroundColor: theme.colorScheme.primary,
+        defaultBackgroundColor: theme.colorScheme.surface,
+        defaultOverlayColor: theme.colorScheme.primary.withOpacity(0.08),
+        defaultShadowColor: theme.colorScheme.shadow,
+        defaultSurfaceTintColor: theme.colorScheme.surfaceTint,
+        defaultElevation: 1,
+        defaultPadding: const EdgeInsets.symmetric(horizontal: 8),
+        defaultBorderSide: BorderSide.none,
+        defaultShape: theme.useMaterial3
+            ? const StadiumBorder()
+            : RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)));
 
     if (icon != null) {
       button = ElevatedButton.icon(
           style: style,
           autofocus: autofocus,
           onPressed: onPressed,
+          onLongPress: onLongPress,
           icon: Icon(
             icon,
             color: iconColor,
@@ -74,10 +91,14 @@ class ElevatedButtonControl extends StatelessWidget {
           style: style,
           autofocus: autofocus,
           onPressed: onPressed,
+          onLongPress: onLongPress,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else {
-      button =
-          ElevatedButton(style: style, onPressed: onPressed, child: Text(text));
+      button = ElevatedButton(
+          style: style,
+          onPressed: onPressed,
+          onLongPress: onLongPress,
+          child: Text(text));
     }
 
     return constrainedControl(button, parent, control);