diff --git a/lib/view/widgets/slider_settings_row.dart b/lib/view/widgets/slider_settings_row.dart index 791fa8dd..24bafa0d 100644 --- a/lib/view/widgets/slider_settings_row.dart +++ b/lib/view/widgets/slider_settings_row.dart @@ -1,5 +1,7 @@ +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({ @@ -7,20 +9,48 @@ class SliderSettingsRow extends StatelessWidget { 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, + ), + ], + ), + ), + ), + ], ), ), ); diff --git a/lib/view/widgets/slider_settings_secondary.dart b/lib/view/widgets/slider_settings_secondary.dart index c6dbbf1b..2116b3bc 100644 --- a/lib/view/widgets/slider_settings_secondary.dart +++ b/lib/view/widgets/slider_settings_secondary.dart @@ -1,25 +1,54 @@ 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; @@ -27,25 +56,56 @@ class SliderSettingsSecondary extends StatelessWidget { 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, + ), + ], + ), + ), + ), + ], + ), ), - ), - ], + ], + ), ); } } diff --git a/lib/view/widgets/slider_value_marker.dart b/lib/view/widgets/slider_value_marker.dart new file mode 100644 index 00000000..22d1ec0d --- /dev/null +++ b/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, + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 831105c4..eff374ca 100644 --- a/pubspec.lock +++ b/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: