Values in RangeSlider inside AlertDialog not updating-CodePudding

I cannot understand why my rangeslider is not updating values when dragging. I am supposed to update the state with the onChanged function, but nothing seems to work. It only works when I press the "Apply" button and I reopen my alertDialog again, where I see the values of the slider updated. All this is wrapped inside and Appbar in a statefulWidget. When I press the filter button a pop up appears with the filter.

onPressed: () {
              showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text('Filter'),
                      content: SizedBox(
                        child: Card(
                          child: Column(
                            children: [
                              Text('Age'),
                              RangeSlider(
                                values: _rangeValues,
                                divisions: 20,
                                labels: RangeLabels(
                                    _rangeValues.start.round().toString(),
                                    _rangeValues.end.round().toString()),
                                onChanged: (  value ) {
                                  _rangeValues = value ;
                                  setState(() {
                                    isFiltering = false;
                                    
                                    varSelectedFilterAgeStart = value.start;
                                    varSelectedFilterAgeEnd = value.end;
                                  });
                                },
                                min: 0.0,
                                max: 20.0,
                              ),
                            ],
                          ),
                        ),
                      ),
                      actions: [
                        ElevatedButton(
                          child: const Text('Apply'),
                          onPressed: () {
                            
                            setState(() {
                              isFiltering = true;
                              varSelectedFilterAge = varSelectedFilterAgeStart;
                            });
                            Navigator.of(context).pop(varSelectedFilterAge);
                          },
                        ),
                        ElevatedButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    );
                  });

What am I doing wrong??

CodePudding user response：

Wrap your AlertDialog with StatefulBuilder and use its setState.

showDialog(
    context: context,
    builder: (BuildContext context) {
      return StatefulBuilder(
          builder: (context, setState) => AlertDialog(