feat(layouts/fader): implement background color for faders

Author: maxjoehnk

crates/ui/lib/extensions/color_extensions.dart

@@ -1,3 +1,4 @@
+import 'package:flex_color_picker/flex_color_picker.dart';
 import 'package:flutter/widgets.dart';
 import 'package:mizer/protos/layouts.pb.dart' as layouts;
 
@@ -15,3 +16,13 @@ layouts.Color fromFlutterColor(Color color) {
     red: color.red / 255,
   );
 }
+
+extension FlutterColorExtensions on Color {
+  Color get dimmed {
+    return Color.fromARGB(alpha8bit, _dim(r), _dim(g), _dim(b));
+  }
+}
+
+int _dim(double value, { double modifier = 0.5 }) {
+  return ((value * modifier) * 255).toInt();
+}

crates/ui/lib/widgets/inputs/fader.dart

@@ -2,6 +2,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:mizer/consts.dart';
+import 'package:mizer/extensions/color_extensions.dart';
 import 'package:mizer/widgets/high_contrast_text.dart';
 
 import 'decoration.dart';
@@ -87,20 +88,28 @@ class _FaderInputState extends State<FaderInput> {
                   onVerticalDragUpdate: (update) => _onInput(constraints, update.localPosition),
                   onTapDown: (update) => _onInput(constraints, update.localPosition),
                   child: Container(
-                    decoration: BoxDecoration(color: Grey700),
-                    // decoration: ControlDecoration(
-                    //     gradient: widget.gradient, color: widget.color, highlight: widget.highlight),
+                    decoration: BoxDecoration(color: widget.color?.dimmed ?? Grey700),
                     child: MouseRegion(
                       cursor: SystemMouseCursors.click,
-                      child: Align(
-                          alignment: AlignmentDirectional(0, y),
-                          child: Container(
-                              color: widget.highlight == true
-                                  ? HIGHLIGHT_CONTROL_COLOR
-                                  : DEFAULT_CONTROL_COLOR,
-                              alignment: AlignmentDirectional.center,
-                              constraints: BoxConstraints.expand(height: 30),
-                              child: Text("$percentage%", textAlign: TextAlign.center))),
+                      child: Stack(
+                        alignment: AlignmentGeometry.bottomCenter,
+                        children: [
+                          Container(
+                            color: widget.color ?? Grey600,
+                            alignment: AlignmentGeometry.bottomCenter,
+                            height: this.value * constraints.maxHeight,
+                          ),
+                          Align(
+                              alignment: AlignmentDirectional(0, y),
+                              child: Container(
+                                  color: widget.highlight == true
+                                      ? HIGHLIGHT_CONTROL_COLOR
+                                      : DEFAULT_CONTROL_COLOR,
+                                  alignment: AlignmentDirectional.center,
+                                  constraints: BoxConstraints.expand(height: 30),
+                                  child: Text("$percentage%", textAlign: TextAlign.center))),
+                        ],
+                      ),
                     ),
                   ),
                 );