Declared out of Widget build scope:
Rx<RangeValues> values = RangeValues(MIN_USD_AMOUNT, MAX_USD_AMOUNT).obs;
Rx<RangeLabels> labels = RangeLabels(MIN_USD_AMOUNT.toString(), MAX_USD_AMOUNT.toString()).obs;
this is in the Container in Scaffold:
Obx(() => RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
max: MAX_USD_AMOUNT,
min: MIN_USD_AMOUNT,
values: values.value,
labels: labels.value,
onChanged: (value) {
print("START: ${value.start}, End: ${value.end}");
this.values = values;
this.labels = RangeLabels(
"${value.start.toInt().toString()} USD",
"${value.end.toInt().toString()} USD")
.obs;
})),
My problem: when I change the value of slider I can see that is work in console but the view does not update. The slider is not updating at all.
Its probably easier just to update a couple RxStrings inside a regular RangeLabels.
RxString startLabel = MIN_USD_AMOUNT.toString().obs;
RxString endLabel = MAX_USD_AMOUNT.toString().obs;
In the onChanged of the slider just update the strings.
controller.startLabel.value = value.start.toString();
controller.endLabel.value = value.end.toString();
The whole Obx would look like this, assuming you've defined a controller of your GetX class.
Obx(
() => RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
min: MIN_USD_AMOUNT,
max: MAX_USD_AMOUNT,
values: controller.values.value,
labels: RangeLabels(
controller.startLabel.value, controller.endLabel.value),
onChanged: (value) {
controller.startLabel.value = value.start.toString();
controller.endLabel.value = value.end.toString();
controller.values.value = value;
},
),
),
That will update the values in the UI.
Related
Am trying to filter using price range but can't seem to get Algolia's built in parameters to handle such cases. I've gone through their shallow documentation but couldn't get any. I've tried to find from other languages(Android Kotlin and ruby) and still it was not possible
SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0.0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
// divisions: facets.length,
labels: RangeLabels(
'Ksh ${start.toStringAsFixed(0)}'.replaceAllMapped(reg, mathFunc),
'Ksh ${end.toStringAsFixed(0)}'.replaceAllMapped(reg, mathFunc),
),
values: RangeValues(start, end),
onChanged: (value) {
//innerState((){});
setter(() {
start = value.start;
end = value.end;
_currentRangeValues = value;
// facetPriceList.toggle(end.round().toString());
});
_productsSearcher.applyState((state) => state.copyWith());
},
),
),
I am trying to create a custom vertical slider with 4 in a row and I am using Syncfusion package, however, when I create a customer widget, onchanged parameter does not accept the Function variable when passed.
SfSliderTheme(
data: SfSliderThemeData(
thumbColor: Colors.blue[200],
activeTrackHeight: kactive_slider_height,
inactiveTrackHeight: kinactive_slider_height,
activeTrackColor: kactive_slider_track_color,
inactiveTrackColor: Colors.black,
trackCornerRadius: -1.0,
),
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (value) {},
),
),
This is my code and I am using multiple times, I want to create a custom widget but onChanged: does not take void Function onPressed. Is there a way?
While interacting with the slider, we will get the new value in the onChanged method. So that we can update the slider thumb with the new value. The new value is the type of dynamic, because the slider supports numeric and date time types.
double value = 50.0;
SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (dynamic newValue) {
setState(() {
value = newValue;
});
},
)
It looks like SfSlider.vertical does take in a ValueChanged function but I think you're seeing an error because there is not enough type information? Based on the documentation it looks like there is no generic associated with SfSlider so the callback you should use would use dynamic e.g (dynamic value) { ... }
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (dynamic value) {},
),
I have a list of colors
const bgcolor = ['Colors.red','Colors.green','Colors.blue','Colors.purple'];
I want to change the color as I slide forward. I can print the color but I want to set it in a container as color:...
The value means double _value = 0;
child: Slider(
value: _value,
label: _emojis[_value.toInt()],
min: 0.0,
max: 3.0,
divisions: 3,
onChangeStart: (double value) {},
onChangeEnd: (double value) {
print('${bgcolor[_value.toInt()]}');
},
onChanged: (double value) {
setState(() {
_value = value;
});
You will need to create another variable that holds the selected color or set the color property of your container to bgcolor[_value].
Container(
color: bgcolor[_value],
child: Slider(
...
),
),
This is my range slider widget implementation, I want to prevent the user from being able to slide the left thumb slider
RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.grey,
min: 1.0,
max: 10.0,
values: values,
labels: labels,
onChanged: (value) {
state(
() {
values = value;
labels = RangeLabels(
"${value.start.toInt().toString()}km",
"${value.end.toInt().toString()}km",
);
},
);
},
),
Add if (values.start != value.start) return; inside your onChanged, this will prevent updating values which prevent updating the RangeSlider
Comment from #ikerfah which helped was to include if(values.start != value.start) return; inside onChanged callback
RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.grey,
min: 1.0,
max: 10.0,
values: values,
labels: labels,
onChanged: (value) {
state(
() {
if (values.start != value.start) return;
values = value;
labels = RangeLabels(
"${value.start.toInt().toString()}km",
"${value.end.toInt().toString()}km",
);
},
);
},
),
I'm having an issue while trying to display labels in my RangeSlider.
The problem is the following:
This is my code for the slider:
RangeSlider(
min: 0,
max: 5000000,
labels: RangeLabels(
'R\$ ${rangeValue.start.round()}',
'R\$ ${rangeValue.end.round()}',
),
values: rangeValue,
inactiveColor: Colors.black54,
activeColor: Colors.black,
onChanged: (v) {
setState(() {
rangeValue = v;
});
},
),
And this is the code to show the labels (It's on a theme in MaterialApp in my main file):
sliderTheme: SliderThemeData(
showValueIndicator: ShowValueIndicator.always,
),
For those who are having this issue, this is solved in the flutter master channel and you can follow up the issue here: https://github.com/flutter/flutter/issues/67071