Flutter Range Slider in showModalBottomSheet not updating UI - flutter

Question

So I have this showModalBottomSheet() and in it I have a couple widgets that require state, so I wrapped with StatefulBuilder(). Even though the other widgets are updating their data and UI as expected but the RangeSlider() does not update the UI(slide), it only updates the data.
I've tried wrapping the RangeSlider() with StatefulBuilder() but still it does not work(slide). I've also tried other solutions like this
How can I solve this issue.
Here is my code snippet
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(12.0),)),
builder:(_){
return StatefulBuilder(builder: (BuildContext context, StateSetter setter){
return SafeArea(
child: Column(
children:[
...
Wrap(
children: List.generate(1, (index) {
final selectable = facets[index];
final facet = selectable.item;
RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));
return SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
labels: RangeLabels(
_currentRangeValues.start.round().toString().replaceAllMapped(reg, mathFunc),
_currentRangeValues.end.round().toString().replaceAllMapped(reg, mathFunc),
),
values: _currentRangeValues,
onChanged: (value) {
setState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
},
),
);
}),
) ...
]
)
);
}
}
)
And here is the screenshots

Answer 1

Because you are calling setState and this will update the main class, if you want to update inside StatefulBuilder you need to call StatefulBuilder's setState, first change your StatefulBuilder to this:
StatefulBuilder(builder: (context, innerSetState) {
...
}
then instead of setState call innerSetState in RangeSlider's onChanged:
innerSetState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
also your main issue is you are define _currentRangeValues inside build method. Every time you update _currentRangeValues its getting reset and define again. because you only want the first item in facets you don't need list. generate remove it, and put the variable before return StatefulBuilder like this:
final selectable = facets[0];
final facet = selectable.item;
RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));
return StatefulBuilder(builder: (context, innerSetState) {
return ....
}
then change your wrap widget to this:
Wrap(
children: [
SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape:
const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
labels: RangeLabels(
_currentRangeValues.start
.round()
.toString()
.replaceAllMapped(reg, mathFunc),
_currentRangeValues.end
.round()
.toString()
.replaceAllMapped(reg, mathFunc),
),
values: _currentRangeValues,
onChanged: (value) {
innerSetState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
},
),
),
],
)