Slider improvements

lib/view/widgets/slider_settings_row.dart

@@ -1,26 +1,56 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:settings/view/widgets/settings_row.dart';
+import 'package:settings/view/widgets/slider_value_marker.dart';
 
 class SliderSettingsRow extends StatelessWidget {
   const SliderSettingsRow({
     Key? key,
     required this.actionLabel,
     this.actionDescription,
     required this.value,
+    this.defaultValue,
     required this.min,
     required this.max,
+    this.showValue = true,
+    this.fractionDigits = 0,
     required this.onChanged,
   }) : super(key: key);
 
+  /// Name of the setting
   final String actionLabel;
+
+  /// Optional description of the setting
   final String? actionDescription;
+
+  /// Current value of the setting
   final double? value;
+
+  /// Default value of the setting
+  final double? defaultValue;
+
+  /// Minimal value of the setting
   final double min;
+
+  /// Maximum value of the setting
   final double max;
+
+  /// If true, the current [value] is visible as a text next to the slider
+  ///
+  /// Defaults to true
+  final bool showValue;
+
+  /// Number of digits after decimal point for [value] displayed as a text
+  ///
+  /// Defaults to 0 (no fractional part)
+  final int fractionDigits;
+
+  /// Function run when the slider changes its value
   final Function(double) onChanged;
 
   @override
   Widget build(BuildContext context) {
+    const thumbRadius = 24.0;
     final value = this.value;
 
     if (value == null) {
@@ -31,11 +61,38 @@ class SliderSettingsRow extends StatelessWidget {
       actionLabel: actionLabel,
       actionDescription: actionDescription,
       secondChild: Expanded(
-        child: Slider(
-          min: min,
-          max: max,
-          value: value,
-          onChanged: onChanged,
+        flex: 2,
+        child: Row(
+          children: [
+            if (showValue)
+              Text(
+                value.toStringAsFixed(fractionDigits),
+              ),
+            Expanded(
+              child: LayoutBuilder(
+                builder: (_, constraints) => Stack(
+                  alignment: Alignment.center,
+                  children: [
+                    if (defaultValue != null)
+                      Positioned(
+                        left: thumbRadius +
+                            (constraints.maxWidth - thumbRadius * 2) *
+                                (defaultValue! - min) /
+                                (max - min),
+                        child: const SliderValueMarker(),
+                      ),
+                    Slider(
+                      label: value.toStringAsFixed(0),
+                      min: min,
+                      max: max,
+                      value: value,
+                      onChanged: onChanged,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );

lib/view/widgets/slider_settings_secondary.dart

@@ -1,51 +1,111 @@
 import 'package:flutter/material.dart';
+import 'package:settings/view/widgets/slider_value_marker.dart';
 
 class SliderSettingsSecondary extends StatelessWidget {
   const SliderSettingsSecondary({
     Key? key,
     required this.label,
     required this.enabled,
+    required this.value,
+    this.defaultValue,
     required this.min,
     required this.max,
-    required this.value,
+    this.showValue = true,
+    this.fractionDigits = 0,
     required this.onChanged,
   }) : super(key: key);
 
+  /// Name of the setting
   final String label;
+
+  /// Whether or not we can interact with the setting slider
   final bool? enabled;
+
+  /// Current value of the setting
+  final double? value;
+
+  /// Default value of the setting
+  final double? defaultValue;
+
+  /// Minimal value of the setting
   final double min;
+
+  /// Maximum value of the setting
   final double max;
-  final double? value;
+
+  /// If true, the current [value] is visible as a text next to the slider
+  ///
+  /// Defaults to true
+  final bool showValue;
+
+  /// Number of digits after decimal point for [value] displayed as a text
+  ///
+  /// Defaults to 0 (no fractional part)
+  final int fractionDigits;
+
+  /// Function run when the slider changes its value
   final Function(double) onChanged;
 
   @override
   Widget build(BuildContext context) {
+    const thumbRadius = 24.0;
     final enabled = this.enabled;
     final value = this.value;
 
     if (value == null || enabled == null) {
       return const SizedBox();
     }
 
-    return Row(
-      children: [
-        Expanded(
-          child: Text(
-            label,
-            style: enabled
-                ? null
-                : TextStyle(color: Theme.of(context).disabledColor),
+    return SizedBox(
+      width: 500,
+      height: 48,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label,
+              style: enabled
+                  ? null
+                  : TextStyle(color: Theme.of(context).disabledColor),
+            ),
           ),
-        ),
-        Expanded(
-          child: Slider(
-            min: min,
-            max: max,
-            value: value,
-            onChanged: enabled ? onChanged : null,
+          Expanded(
+            flex: 2,
+            child: Row(
+              children: [
+                if (showValue)
+                  Text(
+                    value.toStringAsFixed(fractionDigits),
+                  ),
+                Expanded(
+                  child: LayoutBuilder(
+                    builder: (_, constraints) => Stack(
+                      alignment: Alignment.center,
+                      children: [
+                        if (defaultValue != null)
+                          Positioned(
+                            left: thumbRadius +
+                                (constraints.maxWidth - thumbRadius * 2) *
+                                    (defaultValue! - min) /
+                                    (max - min),
+                            child: const SliderValueMarker(),
+                          ),
+                        Slider(
+                          label: value.toStringAsFixed(0),
+                          min: min,
+                          max: max,
+                          value: value,
+                          onChanged: enabled ? onChanged : null,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 }

lib/view/widgets/slider_value_marker.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+class SliderValueMarker extends StatelessWidget {
+  const SliderValueMarker({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 1,
+      height: 40,
+      color: Theme.of(context).dividerColor,
+    );
+  }
+}

pubspec.lock

@@ -28,7 +28,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.2"
+    version: "2.8.1"
   boolean_selector:
     dependency: transitive
     description:
@@ -332,7 +332,7 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.11"
+    version: "0.12.10"
   meta:
     dependency: transitive
     description: