Access changed Slider value from another class in Flutter

Question

I have a class that has a slider.adaptive in it and the whole layout with it. In my main class I call that slider class and declare values for the layout(title etc.). The problem that I'm having is that the value from the slider itself cannot be accessed and saved in that class calling the slider class. I'm still a beginner with Flutter so I would enjoy easy as possible explanations, so I can comprehend them.

The code I have so far:

class CustomSlider extends StatefulWidget {
  final double value;
  final String title;
  final String good;
  final String bad;

  CustomSlider({
    required this.value,
    required this.title,
    required this.good,
    required this.bad,
  });

  @override
  _CustomSlider createState() {
    return _CustomSlider(value: value, title: title, good: good, bad: bad);
  }
}

class _CustomSlider extends State<CustomSlider> {
  double value;
  String title = "";
  double height = 15.0;
  double width = 10.0;
  String good;
  String bad;

  _CustomSlider({
    required this.value,
    required this.title,
    required this.good,
    required this.bad,
  });

  //double value = 0.0;
  @override
  Widget build(BuildContext context) {
    return Container(

//more layout here in-between

                   Expanded(
                      child: Slider.adaptive(
                        value: value,
                        min: 0,
                        max: 10,
                        divisions: 10,
                        activeColor: Colors.cyanAccent,
                        onChanged: (double changedValue) {
                          setState((){
                              value = changedValue;
                          });
                          print(value);
                        },

                        // semanticFormatterCallback: (double endValue){
                        //   return '$value';
                        // },
                        label: value.toString(),
                      ),
                    ),

The class calling Customslider:

class RecordSymptoms extends StatefulWidget {
  @override
  State createState() => new _RecordSymptoms();
}

class _RecordSymptoms extends State<RecordSymptoms> {
  final double height = 20;
  double symptomTotal = 0;
  var generalWellbeing1;
  double generalWellbeing = 0;
  double cramps = 0;
  double flatulence = 0;
  double bowel = 0;

  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.teal[100],
        endDrawer: menu(),
        appBar: AppBar(
          title: Text(
            'Symptome erfassen',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          backgroundColor: Colors.cyanAccent,
        ),
        body: Stack(
          children: <Widget>[
            Positioned.fill(
              child: Image(
                image: AssetImage('assets/Inner_Peace.png'),
                fit: BoxFit.fill,
              ),
            ),
            Column(
              children: <Widget>[
                CustomSlider(
                    value: generalWellbeing,
                    title: 'Allgemeines Wohlbefinden',
                    good: "Gut",
                    bad: "Schlecht"),
                CustomSlider(
                    value: cramps,
                    title: 'Krämpfe',
                    good: "Keine",
                    bad: "Extrem"),
                CustomSlider(
                    value: flatulence,
                    title: 'Blähungen',
                    good: "Keine",
                    bad: "Extrem"),
                CustomSlider(
                    value: bowel,
                    title: 'Stuhlgang',
                    good: "Fest",
                    bad: "Flüssig"),
                Spacer(),
                Container(
                  child: Row(
                    children: <Widget>[
                      Flexible(
                        flex: 20,
                        child: CustomButton(
                          text: 'Keine Symptome',
                          onClick: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => RecordedMeals(),
                              ),
                            );
                          },
                        ),
                      ),
                      Flexible(
                        flex: 20,
                        child: CustomButton(
                          text: 'Symptome speichern',
                          onClick: () async {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => RecordedMeals(),
                              ),
                            );
                            print(generalWellbeing);
                            print(bowel.toString());
                            print(cramps.toString());
                            print(flatulence.toString());
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: height),
              ],
            ),
          ],
        ),
      );

I tried the semanticFormatterCallback, but I don't know how to be able to get that over to the other class. I've also tried to change the class into a function, but then I have the problem that the sliders of all four sliders move together.

the print(flatulence.toString()); and the other ones all print out 0.0 which makes sense when it cant get the value from the other class since I initialized them with 0.

Answer 1

I don't know why no one answered your question at that timebut here is the legit way to do it...

1 - Create callback in constructor name it as you like I named it 'onChanged' since it will only pass value from the slider's own onChanged property. Be careful this is different than the default onChanged property that you are provided with any slider. This will be used inside that default onChanged as your onChanged (you can name it as you like as i said).

class SliderWidget extends StatefulWidget {
  final double sliderHeight;
  final int min;
  final int max;
  final fullWidth;
  final ValueChanged<int> onChanged; // HERE IS THE IMPORTANT PART -> DO THIS
  // late final int value;

  SliderWidget({
    this.sliderHeight = 60,
    this.max = 5,
    this.min = 0,
    this.fullWidth = false,
    required this.onChanged,  // HERE IS THE IMPORTANT PART -> DO THIS
    // required this.value,
  });

this sliderWidget goes something like this somewhere in between:

 Slider(
              value: indexTop.toDouble(),
              min: min,
              max: max,
              divisions: divisions,
              // label: labels[indexTop],
              onChanged: (value) => // THIS IS DEFAULT PROPERTY!
                  setState(() {
                    this.indexTop = value.toInt();
                    widget.onChanged.call(value.toInt()); // THIS IS YOUR CALLBACK!
                    // widget.value = value.toInt();
                  }),
            ),

2- Now just create instance of this widget in any other widget class where your callback listens everytime changes are made for that instance...

      new SliderWidget(onChanged: (int value) { 
      print(value.toInt();
}
,),

If still difficult to execute, write me and I will explain you and anyone who wants to achieve same result...