widget communication using void callback flutter

Question

I have a two widget classes , one is the main. I have a class widget have a slider and I want to change a value in the main widget which its contain a row have this slider widget as a child and that text.

here is what I'm trying to do

    class MyHomePage extends StatelessWidget {

   final double distance ;
   final VoidCallback distanceChanged;
   const MyHomePage({@required this.distanceChanged,this.distance});

   @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Progress Widget'),
        centerTitle: true,
      ),
      body:
          Column(
            children: [
              DistanceSlider(),
              Container(height: 120,
              ),
              Text('$distance',
              ),
            ],
          ),
    );
  }
}

and here is the slider widget class

class DistanceSlider extends StatefulWidget {

  @override
  _DistanceSliderState createState() => _DistanceSliderState();
}


class _DistanceSliderState extends State<DistanceSlider> {


  double _currentSliderValue = 10;


  @override
  Widget build(BuildContext context) {

    return
      Container(
        height: 150,
        child:
        Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
          child: Padding(

            padding: EdgeInsets.all(5),
            child: Column(
              children: <Widget> [
                Expanded(child:
                Padding(padding: EdgeInsets.all(20),
                  child: Row(
                    children: [Text('Max Distance',
                      style: TextStyle(
                        fontSize: 18,
                        color: Colors.black26,
                      ),
                    ),
                      Spacer(),
                      Text(_currentSliderValue.toInt().toString()+'Kms',
                        style: TextStyle(
                          fontSize: 18,
                        ),
                      ),
                    ],
                  ),
                ),
                ),
                SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    inactiveTrackColor: Colors.black12,
                    trackHeight: 3.0,
                  ),
                  child: Slider(
                    value: _currentSliderValue,
                    min: 0,
                    max: 100,
                    divisions: 5,
                    // _currentSliderValue.round().toString(),
                      onChanged: (double value) {
                      setState(() {
                        _currentSliderValue = value;
                      }
                      );
                      MyHomePage(distance: value,);

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

how can I change the value of distance in the first class based on the slider value ?

Answer 1

I think what you're looking for is a state management solution. Get started here.

Answer 2

I tend to use value holders (if you mix them with ChangeNotifier you can easily react to changes) that I pass to child widgets.

In your case something like this:

class ValueHolder with ChangeNotifier {
  double _value;

  double get value => _value;

  void set(double newValue) {
    _value = newValue;
    notifyListeners();
  }
}

And then instead of declaring _currentSliderValue in the child widget, pass the ValueHolder to the child and use this instead. In the parent widget, attach a listener to the ValueHolder which calls setState on the parent (or update only the Text widget using a StreamBuilder).