Merge pull request #1233 from flutter-form-builder-ecosystem/feature-1207

feat: add custom widgets to legend slider

Author: deandreamatias

lib/src/fields/form_builder_range_slider.dart

@@ -118,9 +118,48 @@ class FormBuilderRangeSlider extends FormBuilderField<RangeValues> {
   /// When used [maxValueWidget] will override the value for the maximum widget.
   final Widget Function(String max)? maxValueWidget;
 
-  final DisplayValues displayValues;
+  /// Provides the ability to format a number in a locale-specific way.
+  ///
+  /// The format is specified as a pattern using a subset of the ICU formatting
+  /// patterns.
+  ///
+  /// - `0` A single digit
+  /// - `#` A single digit, omitted if the value is zero
+  /// - `.` Decimal separator
+  /// - `-` Minus sign
+  /// - `,` Grouping separator
+  /// - `E` Separates mantissa and expontent
+  /// - `+` - Before an exponent, to say it should be prefixed with a plus sign.
+  /// - `%` - In prefix or suffix, multiply by 100 and show as percentage
+  /// - `‰ (\u2030)` In prefix or suffix, multiply by 1000 and show as per mille
+  /// - `¤ (\u00A4)` Currency sign, replaced by currency name
+  /// - `'` Used to quote special characters
+  /// - `;` Used to separate the positive and negative patterns (if both present)
+  ///
+  /// For example,
+  ///
+  ///       var f = NumberFormat("###.0#", "en_US");
+  ///       print(f.format(12.345));
+  ///           ==> 12.34
+  ///
+  /// If the locale is not specified, it will default to the current locale. If
+  /// the format is not specified it will print in a basic format with at least
+  /// one integer digit and three fraction digits.
+  ///
+  /// There are also standard patterns available via the special constructors.
+  /// e.g.
+  ///
+  ///       var percent = NumberFormat.percentPattern("ar"); var
+  ///       eurosInUSFormat = NumberFormat.currency(locale: "en_US",
+  ///           symbol: "€");
+  ///
+  /// There are several such constructors available, though some of them are
+  /// limited. For example, at the moment, scientificPattern prints only as
+  /// equivalent to "#E0" and does not take into account significant digits.
   final NumberFormat? numberFormat;
 
+  final DisplayValues displayValues;
+
   /// Creates field to select a range of values on a Slider
   FormBuilderRangeSlider({
     super.key,

lib/src/fields/form_builder_slider.dart

@@ -4,6 +4,12 @@ import 'package:intl/intl.dart';
 
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 
+/// Configuration to what values show on sliders
+///
+/// - `all`: Show all values
+/// - `current`: Show only the current value (middle)
+/// - `minMax`: Show only the min and max values (start and finish)
+/// - `none`: No show any values
 enum DisplayValues { all, current, minMax, none }
 
 /// Field for selection of a numerical value on a slider
@@ -121,12 +127,68 @@ class FormBuilderSlider extends FormBuilderField<double> {
   /// {@macro flutter.widgets.Focus.autofocus}
   final bool autofocus;
 
-  ///TODO: Add documentation
+  /// An alternative to displaying the text value of the slider.
+  ///
+  /// Defaults to null.
+  ///
+  /// When used [minValueWidget] will override the value for the minimum widget.
+  final Widget Function(String min)? minValueWidget;
+
+  /// An alternative to displaying the text value of the slider.
+  ///
+  /// Defaults to null.
+  ///
+  /// When used [valueWidget] will override the value for the selected value widget.
+  final Widget Function(String value)? valueWidget;
+
+  /// An alternative to displaying the text value of the slider.
+  ///
+  /// Defaults to null.
+  ///
+  /// When used [maxValueWidget] will override the value for the maximum widget.
+  final Widget Function(String max)? maxValueWidget;
+
+  /// Provides the ability to format a number in a locale-specific way.
+  ///
+  /// The format is specified as a pattern using a subset of the ICU formatting
+  /// patterns.
+  ///
+  /// - `0` A single digit
+  /// - `#` A single digit, omitted if the value is zero
+  /// - `.` Decimal separator
+  /// - `-` Minus sign
+  /// - `,` Grouping separator
+  /// - `E` Separates mantissa and expontent
+  /// - `+` - Before an exponent, to say it should be prefixed with a plus sign.
+  /// - `%` - In prefix or suffix, multiply by 100 and show as percentage
+  /// - `‰ (\u2030)` In prefix or suffix, multiply by 1000 and show as per mille
+  /// - `¤ (\u00A4)` Currency sign, replaced by currency name
+  /// - `'` Used to quote special characters
+  /// - `;` Used to separate the positive and negative patterns (if both present)
+  ///
+  /// For example,
+  ///
+  ///       var f = NumberFormat("###.0#", "en_US");
+  ///       print(f.format(12.345));
+  ///           ==> 12.34
+  ///
+  /// If the locale is not specified, it will default to the current locale. If
+  /// the format is not specified it will print in a basic format with at least
+  /// one integer digit and three fraction digits.
+  ///
+  /// There are also standard patterns available via the special constructors.
+  /// e.g.
+  ///
+  ///       var percent = NumberFormat.percentPattern("ar"); var
+  ///       eurosInUSFormat = NumberFormat.currency(locale: "en_US",
+  ///           symbol: "€");
+  ///
+  /// There are several such constructors available, though some of them are
+  /// limited. For example, at the moment, scientificPattern prints only as
+  /// equivalent to "#E0" and does not take into account significant digits.
   final NumberFormat? numberFormat;
+
   final DisplayValues displayValues;
-  final TextStyle? minTextStyle;
-  final TextStyle? textStyle;
-  final TextStyle? maxTextStyle;
 
   /// Creates field for selection of a numerical value on a slider
   FormBuilderSlider({
@@ -154,11 +216,11 @@ class FormBuilderSlider extends FormBuilderField<double> {
     this.semanticFormatterCallback,
     this.numberFormat,
     this.displayValues = DisplayValues.all,
-    this.minTextStyle,
-    this.textStyle,
-    this.maxTextStyle,
     this.autofocus = false,
     this.mouseCursor,
+    this.maxValueWidget,
+    this.minValueWidget,
+    this.valueWidget,
   }) : super(
           builder: (FormFieldState<double?> field) {
             final state = field as _FormBuilderSliderState;
@@ -196,24 +258,21 @@ class FormBuilderSlider extends FormBuilderField<double> {
                       children: <Widget>[
                         if (displayValues != DisplayValues.none &&
                             displayValues != DisplayValues.current)
-                          Text(
-                            effectiveNumberFormat.format(min),
-                            style: minTextStyle ?? textStyle,
-                          ),
+                          minValueWidget
+                                  ?.call(effectiveNumberFormat.format(min)) ??
+                              Text(effectiveNumberFormat.format(min)),
                         const Spacer(),
                         if (displayValues != DisplayValues.none &&
                             displayValues != DisplayValues.minMax)
-                          Text(
-                            effectiveNumberFormat.format(field.value),
-                            style: textStyle,
-                          ),
+                          valueWidget?.call(
+                                  effectiveNumberFormat.format(field.value)) ??
+                              Text(effectiveNumberFormat.format(field.value)),
                         const Spacer(),
                         if (displayValues != DisplayValues.none &&
                             displayValues != DisplayValues.current)
-                          Text(
-                            effectiveNumberFormat.format(max),
-                            style: maxTextStyle ?? textStyle,
-                          ),
+                          maxValueWidget
+                                  ?.call(effectiveNumberFormat.format(max)) ??
+                              Text(effectiveNumberFormat.format(max)),
                       ],
                     ),
                   ],