Flutter Range Slider in showModalBottomSheet not updating UI

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

eamirho3ein · Answer 1 · 2022-12-15T09:44:04.080

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);
          });
        },
      ),
    ),
  ],
)

Yes I did. I understand that the `showModalBottomsheet` is a stateless widget and therefor adding a statefulbuilder will solve the issue. I only solves other parts but not the `RangeSlider` — Davis, Dec 15 '22 at 09:20
can you explain why are you call List.generate only for one item? — eamirho3ein, Dec 15 '22 at 09:24
How could I access the index without creating a list?? Is it possible?? — Davis, Dec 15 '22 at 09:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/250428/discussion-between-eamirho3ein-and-davis). — eamirho3ein, Dec 15 '22 at 09:29

Flutter Range Slider in showModalBottomSheet not updating UI

1 Answers1