Merge pull request #1224 from flutter-form-builder-ecosystem/custom-w…

…idgets-range-slider Add custom widgets to range slider
flutter-form-builder-ecosystem · Apr 22, 2023 · c88535d · c88535d
2 parents 71cf8db + 01bc243
commit c88535d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -129,12 +129,19 @@ class _CompleteFormState extends State<CompleteForm> {
                     ),
                     FormBuilderRangeSlider(
                       name: 'range_slider',
-                      // validator: FormBuilderValidators.compose([FormBuilderValidators.min(context, 6)]),
                       onChanged: _onChanged,
                       min: 0.0,
                       max: 100.0,
                       initialValue: const RangeValues(4, 7),
                       divisions: 20,
+                      maxValueWidget: (max) => TextButton(
+                        onPressed: () {
+                          _formKey.currentState?.patchValue(
+                            {'range_slider': const RangeValues(4, 100)},
+                          );
+                        },
+                        child: Text(max),
+                      ),
                       activeColor: Colors.red,
                       inactiveColor: Colors.pink[100],
                       decoration:

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -91,10 +91,10 @@ packages:
     dependency: "direct main"
     description:
       name: form_builder_validators
-      sha256: e4d54c0c513e3e36ae4e4905994873a0a907585407212effeef39a68e759670c
+      sha256: d0a940d77231723fcb203ad6f5319ff30cd0c4412a6e74d29d826957b1f9afe0
       url: "https://pub.dev"
     source: hosted
-    version: "8.4.0"
+    version: "8.5.0"
   intl:
     dependency: "direct main"
     description:

diff --git a/lib/src/fields/form_builder_range_slider.dart b/lib/src/fields/form_builder_range_slider.dart
@@ -97,10 +97,28 @@ class FormBuilderRangeSlider extends FormBuilderField<RangeValues> {
   /// inform users what the currently selected value is with more context.
   final SemanticFormatterCallback? semanticFormatterCallback;
 
+  /// 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;
+
   final DisplayValues displayValues;
-  final TextStyle? minTextStyle;
-  final TextStyle? textStyle;
-  final TextStyle? maxTextStyle;
   final NumberFormat? numberFormat;
   final bool shouldRequestFocus;
 
@@ -128,9 +146,9 @@ class FormBuilderRangeSlider extends FormBuilderField<RangeValues> {
     this.labels,
     this.semanticFormatterCallback,
     this.displayValues = DisplayValues.all,
-    this.minTextStyle,
-    this.textStyle,
-    this.maxTextStyle,
+    this.minValueWidget,
+    this.valueWidget,
+    this.maxValueWidget,
     this.numberFormat,
     this.shouldRequestFocus = false,
   }) : super(builder: (FormFieldState<RangeValues?> field) {
@@ -170,24 +188,22 @@ class FormBuilderRangeSlider extends FormBuilderField<RangeValues> {
                     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!.start)} - ${effectiveNumberFormat.format(field.value!.end)}',
-                          style: textStyle,
-                        ),
+                        valueWidget?.call(
+                                '${effectiveNumberFormat.format(field.value!.start)} - ${effectiveNumberFormat.format(field.value!.end)}') ??
+                            Text(
+                                '${effectiveNumberFormat.format(field.value!.start)} - ${effectiveNumberFormat.format(field.value!.end)}'),
                       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)),
                     ],
                   ),
                 ],