Range slider in bottom sheet not working in flutter

Question

I am stuck here where my range slider is not working when I am using it on the bottom sheet. I am getting 0 errors so I don't know where it is stuck. this function is working fine when I use it in the build function but not in the bottom sheet. below is the code for it -:

RangeValues Myheight = const RangeValues(150, 180);
 
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: InkWell(
                  child: TextField(
                    controller: interest,
                    decoration: InputDecoration(
                      enabled: false,
                      suffixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.add),
                      ),
                      prefixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.favorite_border_rounded),
                      ),
                    ),
                  ),
                  onTap: () {
                    _bottomSheet(context, Myheight);
                  },
                ),
    );
  }


    _bottomSheet(context, myheight) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext c) {
          return Container(
            height: 250,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    height: 180,
                    child: ReusableCard(
                      colors: kActiveCardColor,
                      cardChild: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            'HEIGHT',
                            style: kLabelStyle,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.baseline,
                            textBaseline: TextBaseline.alphabetic,
                            children: <Widget>[
                              Text(
                                '${myheight.start.round().toString()} - ${myheight.end.round().toString()}',
                                style: kNumberStyle,
                              ),
                              Text(
                                'cm',
                                style: kLabelStyle,
                              ),
                            ],
                          ),
                          SliderTheme(
                            data: SliderTheme.of(context).copyWith(
                              activeTrackColor: Colors.pink,
                              inactiveTrackColor: Color(0xFF8D8E98),
                              thumbColor: Color(0xFFEB1555),
                              thumbShape:
                              RoundSliderThumbShape(enabledThumbRadius: 15),
                              overlayShape:
                              RoundSliderOverlayShape(overlayRadius: 30.0),
                              overlayColor: Color(0x29EB1555),
                              showValueIndicator: ShowValueIndicator.always,
                            ),
                            child: RangeSlider(
                              values: myheight,
                              min: 100,
                              max: 220,
                              labels: RangeLabels('${myheight.start.round()}', '${myheight.end.round()}'),
                              // divisions: 10,
                              onChanged: (RangeValues newValue) {
                                setState(() {
                                  myheight = newValue;
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

              ],
            ),
          );
        });
  }

I am calling this on Textfield tap where I am passing the variable. please let me know any solution.

below is the image for the working and non-working Range slider respectively. -:

below is the image for the edit of the code -:

edit -: this my edited code ..

  _bottomHeightSheet(context) {
      RangeValues Myheight = const RangeValues(150, 180);

      showModalBottomSheet(
        context: context,
        builder: (BuildContext c) {
          return StatefulBuilder(
            builder: (BuildContext context,
                void Function(void function()) setState){ // getting error in this line
              return Container(
                height: 250,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Flexible(
                      fit: FlexFit.loose,
                      child: Container(
                        height: 180,
                        child: ReusableCard(
                          colors: kActiveCardColor,
                          cardChild: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                'HEIGHT',
                                style: kLabelStyle,
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.baseline,
                                textBaseline: TextBaseline.alphabetic,
                                children: <Widget>[
                                  Text(
                                    '${Myheight.start.round().toString()} - ${Myheight.end.round().toString()}',
                                    style: kNumberStyle,
                                  ),
                                  Text(
                                    'cm',
                                    style: kLabelStyle,
                                  ),
                                ],
                              ),
                              SliderTheme(
                                data: SliderTheme.of(context).copyWith(
                                  activeTrackColor: Colors.pink,
                                  inactiveTrackColor: Color(0xFF8D8E98),
                                  thumbColor: Color(0xFFEB1555),
                                  thumbShape:
                                  RoundSliderThumbShape(enabledThumbRadius: 15),
                                  overlayShape:
                                  RoundSliderOverlayShape(overlayRadius: 30.0),
                                  overlayColor: Color(0x29EB1555),
                                  showValueIndicator: ShowValueIndicator.always,
                                ),
                                child: RangeSlider(
                                  values: Myheight,
                                  min: 100,
                                  max: 220,
                                  labels: RangeLabels('${Myheight.start.round()}', '${Myheight.end.round()}'),
                                  // divisions: 10,
                                  onChanged: (RangeValues newValue) {
                                    setState(() {
                                      Myheight = newValue;
                                    });
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),

                  ],
                ),
              );
              },
            );
        });
  }

Answer 1

the showModalBottomSheet you are calling, the bottom sheet is a StateLessWidget hence you can not call setState or change state inside that. To fix this, I would recommend wrapping the Container inside the bottomModalSheet with a StateFullBuilder then you can call setState inside the bottomModelSheet and change the RanageSlider values.

Replace your _bottomSheet func with this

            showModalBottomSheet(
                context: context,
                builder: (BuildContext c) {
                  return StatefulBuilder(builder: (BuildContext context, void Function(void Function()) setState) { 
                    return Container(
                      height: 250,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Flexible(
                            fit: FlexFit.loose,
                            child: Container(
                              height: 180,
                              child: ReusableCard(
                                colors: kActiveCardColor,
                                cardChild: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(
                                      'HEIGHT',
                                      style: kLabelStyle,
                                    ),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      crossAxisAlignment: CrossAxisAlignment.baseline,
                                      textBaseline: TextBaseline.alphabetic,
                                      children: <Widget>[
                                        Text(
                                          '${myheight.start.round().toString()} - ${myheight.end.round().toString()}',
                                          style: kNumberStyle,
                                        ),
                                        Text(
                                          'cm',
                                          style: kLabelStyle,
                                        ),
                                      ],
                                    ),
                                    SliderTheme(
                                      data: SliderTheme.of(context).copyWith(
                                        activeTrackColor: Colors.pink,
                                        inactiveTrackColor: Color(0xFF8D8E98),
                                        thumbColor: Color(0xFFEB1555),
                                        thumbShape:
                                        RoundSliderThumbShape(enabledThumbRadius: 15),
                                        overlayShape:
                                        RoundSliderOverlayShape(overlayRadius: 30.0),
                                        overlayColor: Color(0x29EB1555),
                                        showValueIndicator: ShowValueIndicator.always,
                                      ),
                                      child: RangeSlider(
                                        values: myheight,
                                        min: 100,
                                        max: 220,
                                        labels: RangeLabels('${myheight.start.round()}', '${myheight.end.round()}'),
                                        // divisions: 10,
                                        onChanged: (RangeValues newValue) {
                                          setState(() {
                                            myheight = newValue;
                                          });
                                        },
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),

                        ],
                      ),
                    );
                  },);
                });
          }