Slider control

Author: FeodorFitsner

client/lib/controls/create_control.dart

@@ -22,6 +22,7 @@ import 'progress_ring.dart';
 import 'radio.dart';
 import 'radio_group.dart';
 import 'row.dart';
+import 'slider.dart';
 import 'snack_bar.dart';
 import 'stack.dart';
 import 'switch.dart';
@@ -131,6 +132,11 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
               parent: parent,
               control: controlView.control,
               parentDisabled: parentDisabled);
+        case ControlType.slider:
+          return SliderControl(
+              parent: parent,
+              control: controlView.control,
+              parentDisabled: parentDisabled);
         case ControlType.radioGroup:
           return RadioGroupControl(
               parent: parent,

client/lib/controls/slider.dart

@@ -0,0 +1,104 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_redux/flutter_redux.dart';
+
+import '../actions.dart';
+import '../models/app_state.dart';
+import '../models/control.dart';
+import '../protocol/update_control_props_payload.dart';
+import '../web_socket_client.dart';
+import 'create_control.dart';
+
+class SliderControl extends StatefulWidget {
+  final Control? parent;
+  final Control control;
+  final bool parentDisabled;
+
+  const SliderControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  State<SliderControl> createState() => _SliderControlState();
+}
+
+class _SliderControlState extends State<SliderControl> {
+  double _value = 0;
+  Timer? _debounce;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _debounce?.cancel();
+    super.dispose();
+  }
+
+  void onChange(double value, Function dispatch) {
+    var svalue = value.toString();
+    debugPrint(svalue);
+    setState(() {
+      _value = value;
+    });
+
+    if (_debounce?.isActive ?? false) _debounce!.cancel();
+    List<Map<String, String>> props = [
+      {"i": widget.control.id, "value": svalue}
+    ];
+    dispatch(UpdateControlPropsAction(UpdateControlPropsPayload(props: props)));
+
+    _debounce = Timer(const Duration(milliseconds: 100), () {
+      ws.updateControlProps(props: props);
+      ws.pageEventFromWeb(
+          eventTarget: widget.control.id,
+          eventName: "change",
+          eventData: svalue);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("SliderControl build: ${widget.control.id}");
+
+    String? label = widget.control.attrString("label");
+    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");
+
+    return StoreConnector<AppState, Function>(
+        distinct: true,
+        converter: (store) => store.dispatch,
+        builder: (context, dispatch) {
+          debugPrint(
+              "SliderControl StoreConnector build: ${widget.control.id}");
+
+          double value = widget.control.attrDouble("value", 0)!;
+          if (_value != value) {
+            _value = value;
+          }
+
+          var slider = Slider(
+              value: _value,
+              min: min,
+              max: max,
+              divisions: divisions,
+              label: label?.replaceAll("{value}", _value.toString()),
+              onChanged: !disabled
+                  ? (double value) {
+                      onChange(value, dispatch);
+                    }
+                  : null);
+
+          return constrainedControl(slider, widget.parent, widget.control);
+        });
+  }
+}