How to link linear progress indicator and slider in flutter?

Question

I am making a music player where the progress indicator will act as a slider to change the music position and also as a progress bar.

As far as I understood the slider can only be set manually whereas the linearprogess indicator has no such slider.
I want a way to integrate both such that the slider shows the current progress of the music track as well as the user can drag it to affect the value.

Is there any way to do so? Or if I have any misconception please correct me.

THANK YOU

Answer 1

You can create a variable that holds the value for the slider and as you slide, you update this variable and also set the variable to the progress indicator.

Like this:

class LinearSlider extends StatefulWidget {
  @override
  _LinearSliderState createState() => _LinearSliderState();
}

class _LinearSliderState extends State<LinearSlider> {
  double sliderValue = 0.3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Slider(
            value: sliderValue,
            onChanged: (v){
              setState(() {
                sliderValue = v;
              });
            },
          ),

          LinearProgressIndicator(
            value: sliderValue,
          ),
        ],
      ),
    );
  }
}