底部工作表中的范围滑块在颤动中不起作用

问题描述

当我在底部工作表上使用范围滑块时，我被困在这里。 我收到 0 个错误，所以我不知道它卡在哪里。 当我在构建函数中使用它而不是在底部工作表中时，这个函数工作正常。 下面是它的代码 -:

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

我在传递变量的 Textfield tap 上调用它。 请让我知道任何解决方案。

下面分别是工作和非工作范围滑块的图像。 -：

下面是代码编辑的图片-：

编辑 -：这是我编辑过的代码..

  _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',Row(
                                mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                                  Text(
                                    '${Myheight.start.round().toString()} - ${Myheight.end.round().toString()}',Text(
                                    'cm',SliderTheme(
                                data: SliderTheme.of(context).copyWith(
                                  activeTrackColor: Colors.pink,thumbShape:
                                  RoundSliderThumbShape(enabledThumbRadius: 15),overlayShape:
                                  RoundSliderOverlayShape(overlayRadius: 30.0),child: RangeSlider(
                                  values: Myheight,labels: RangeLabels('${Myheight.start.round()}','${Myheight.end.round()}'),onChanged: (RangeValues newValue) {
                                    setState(() {
                                      Myheight = newValue;
                                    });
                                  },);
              },);
        });
  }

解决方法

您正在调用的 showModalBottomSheet，底部的表格是 StateLessWidget 因此您不能调用 setState 或更改其中的状态。要解决此问题，我建议将 Container 用 bottomModalSheet 包裹在 StateFullBuilder 中，然后您可以在 setState 中调用 bottomModelSheet 并更改 RanageSlider 值。

用这个替换你的 _bottomSheet 函数

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