CupertinoSlider control and Slider.adaptive (flet-dev#2224)

* cupertino slider * Slider.adaptive --------- Co-authored-by: Feodor Fitsner <[email protected]>
zrr1999 · Jul 17, 2024 · 29097ec · 29097ec
1 parent e7fb227
commit 29097ec
Show file tree

Hide file tree

Showing 6 changed files with 386 additions and 2 deletions.
diff --git a/package/lib/src/controls/create_control.dart b/package/lib/src/controls/create_control.dart
@@ -18,6 +18,7 @@ import 'animated_switcher.dart';
 import 'bottom_app_bar.dart';
 import 'audio.dart';
 import 'badge.dart';
+import 'cupertino_slider.dart';
 import 'expansion_panel.dart';
 import 'selection_area.dart';
 import 'banner.dart';
@@ -518,6 +519,14 @@ Widget createWidget(Key? key, ControlViewModel controlView, Control? parent,
         parentDisabled: parentDisabled,
         dispatch: controlView.dispatch,
       );
+    case "cupertinoslider":
+      return CupertinoSliderControl(
+        key: key,
+        parent: parent,
+        control: controlView.control,
+        parentDisabled: parentDisabled,
+        dispatch: controlView.dispatch,
+      );
     case "rangeslider":
       return RangeSliderControl(
         key: key,

diff --git a/package/lib/src/controls/cupertino_slider.dart b/package/lib/src/controls/cupertino_slider.dart
@@ -0,0 +1,123 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import '../actions.dart';
+import '../flet_app_services.dart';
+import '../models/control.dart';
+import '../protocol/update_control_props_payload.dart';
+import '../utils/colors.dart';
+import '../utils/desktop.dart';
+import '../utils/debouncer.dart';
+import 'create_control.dart';
+
+class CupertinoSliderControl extends StatefulWidget {
+  final Control? parent;
+  final Control control;
+  final bool parentDisabled;
+  final dynamic dispatch;
+
+  const CupertinoSliderControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.parentDisabled,
+      required this.dispatch})
+      : super(key: key);
+
+  @override
+  State<CupertinoSliderControl> createState() => _CupertinoSliderControlState();
+}
+
+class _CupertinoSliderControlState extends State<CupertinoSliderControl> {
+  double _value = 0;
+  final _debouncer = Debouncer(milliseconds: isDesktop() ? 10 : 100);
+
+  @override
+  void dispose() {
+    _debouncer.dispose();
+    super.dispose();
+  }
+
+  void onChange(double value) {
+    var svalue = value.toString();
+    debugPrint(svalue);
+    setState(() {
+      _value = value;
+    });
+
+    List<Map<String, String>> props = [
+      {"i": widget.control.id, "value": svalue}
+    ];
+    widget.dispatch(
+        UpdateControlPropsAction(UpdateControlPropsPayload(props: props)));
+
+    _debouncer.run(() {
+      final server = FletAppServices.of(context).server;
+      server.updateControlProps(props: props);
+      server.sendPageEvent(
+          eventTarget: widget.control.id, eventName: "change", eventData: '');
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("CupertinoSliderControl build: ${widget.control.id}");
+
+    bool disabled = widget.control.isDisabled || widget.parentDisabled;
+
+    double min = widget.control.attrDouble("min", 0)!;
+    double max = widget.control.attrDouble("max", 1)!;
+    int? divisions = widget.control.attrInt("divisions");
+
+    final server = FletAppServices.of(context).server;
+
+    debugPrint(
+        "CupertinoSliderControl StoreConnector build: ${widget.control.id}");
+
+    double value = widget.control.attrDouble("value", 0)!;
+    if (_value != value) {
+      // verify limits
+      if (value < min) {
+        _value = min;
+      } else if (value > max) {
+        _value = max;
+      } else {
+        _value = value;
+      }
+    }
+
+    var cupertinoSlider = CupertinoSlider(
+        value: _value,
+        min: min,
+        max: max,
+        divisions: divisions,
+        activeColor: HexColor.fromString(
+            Theme.of(context), widget.control.attrString("activeColor", "")!),
+        thumbColor: HexColor.fromString(Theme.of(context),
+                widget.control.attrString("thumbColor", "")!) ??
+            CupertinoColors.white,
+        onChanged: !disabled
+            ? (double value) {
+                onChange(value);
+              }
+            : null,
+        onChangeStart: !disabled
+            ? (double value) {
+                server.sendPageEvent(
+                    eventTarget: widget.control.id,
+                    eventName: "change_start",
+                    eventData: value.toString());
+              }
+            : null,
+        onChangeEnd: !disabled
+            ? (double value) {
+                server.sendPageEvent(
+                    eventTarget: widget.control.id,
+                    eventName: "change_end",
+                    eventData: value.toString());
+              }
+            : null);
+
+    return constrainedControl(
+        context, cupertinoSlider, widget.parent, widget.control);
+  }
+}
diff --git a/package/lib/src/controls/slider.dart b/package/lib/src/controls/slider.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import '../actions.dart';
 import '../flet_app_services.dart';
@@ -7,6 +8,7 @@ import '../utils/colors.dart';
 import '../utils/desktop.dart';
 import '../utils/debouncer.dart';
 import 'create_control.dart';
+import 'cupertino_slider.dart';
 
 class SliderControl extends StatefulWidget {
   final Control? parent;
@@ -78,6 +80,16 @@ class _SliderControlState extends State<SliderControl> {
   Widget build(BuildContext context) {
     debugPrint("SliderControl build: ${widget.control.id}");
 
+    bool adaptive = widget.control.attrBool("adaptive", false)!;
+    if (adaptive &&
+        (defaultTargetPlatform == TargetPlatform.iOS ||
+            defaultTargetPlatform == TargetPlatform.macOS)) {
+      return CupertinoSliderControl(
+          control: widget.control,
+          parentDisabled: widget.parentDisabled,
+          dispatch: widget.dispatch);
+    }
+
     String? label = widget.control.attrString("label");
     bool autofocus = widget.control.attrBool("autofocus", false)!;
     bool disabled = widget.control.isDisabled || widget.parentDisabled;

diff --git a/sdk/python/packages/flet-core/src/flet_core/__init__.py b/sdk/python/packages/flet-core/src/flet_core/__init__.py
@@ -229,4 +229,5 @@
 from flet_core.selection_area import SelectionArea
 from flet_core.cupertino_radio import CupertinoRadio
 from flet_core.cupertino_checkbox import CupertinoCheckbox
+from flet_core.cupertino_slider import CupertinoSlider
 from flet_core.cupertino_switch import CupertinoSwitch