I have ListView.builder in which I display data from my API call which has List of data after decoding. Among the data I have audio files. I also used Slider widget for this but all the slider move at once. I used Column inside ListView.builder to implement Slider and play pause button. Could anyone help me with this. Thank you.

ListView.builder(
                      itemCount: basicBooksSets.length,
                      itemBuilder: (ctx, i) {
                        return Container(
                            margin: EdgeInsets.only(
                                bottom:
                                    MediaQuery.of(context).size.height * 0.04),
                            decoration: BoxDecoration(color: Colors.white),
                            child: Column(
                              children: [
                                basicBooksSets[i].imageSrc == null
                                    ? Container()
                                    : AspectRatio(
                                        aspectRatio: 1,
                                        child: PhotoView(
                                          backgroundDecoration:
                                              const BoxDecoration(
                                                  color: Colors.white),
                                          initialScale:
                                              PhotoViewComputedScale.contained *
                                                  0.8,
                                          imageProvider: NetworkImage(
                                              basicBooksSets[i].imageSrc!),
                                        ),
                                      ),
                                SizedBox(
                                  height:
                                      MediaQuery.of(context).size.height * 0.04,
                                ),
                                basicBooksSets[i].audioSrc == null
                                    ? Container()
                                    : Column(
                                        children: [
                                          Slider(
                                              min: 0,
                                              max:
                                                  duration.inSeconds.toDouble(),
                                              value:
                                                  position.inSeconds.toDouble(),
                                              onChanged: (value) async {
                                                final position = Duration(
                                                    seconds: value.toInt());
                                                await audioPlayer
                                                    .seek(position);
                                              }),
                                          CircleAvatar(
                                            radius: 35,
                                            child: IconButton(
                                                onPressed: () async {
                                                  if (isPlaying) {
                                                    await audioPlayer.pause();
                                                  } else {
                                                    optionAudioPlay(
                                                        audioUrl:
                                                            basicBooksSets[i]
                                                                .audioSrc!,
                                                        optionIndex: i);
                                                  }
                                                },
                                                icon: Icon(isPlaying
                                                    ? Icons.pause
                                                    : Icons.play_arrow)),
                                          )
                                        ],
                                      ),
                                Text(
                                  basicBooksSets[i].title.toString(),
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold),
                                ),
                                SizedBox(
                                  height:
                                      MediaQuery.of(context).size.height * 0.02,
                                ),
                              ],
                            ));
                      })

my optionAudioPlay function is as

void optionAudioPlay({
    required String audioUrl,
    int? optionIndex,
  }) async {
    // audioPlayer.dispose();
    // audioPlayer = AudioPlayer();

    if (opitonActiveAudioUrl == audioUrl) {
      setState(() {
        opitonActiveAudioUrl = null;
        opitonActiveAudioIndex = null;
        isPlaying = false;
      });
      return;
    }
    audioPlayer.onPlayerStateChanged.listen((state) {
      setState(() {
        isPlaying = state == PlayerState.PLAYING;
        myBoolList[optionIndex!] = state == PlayerState.PLAYING;
      });
    });

    audioPlayer.onDurationChanged.listen((newDuration) {
      setState(() {
        duration = newDuration;
      });
    });

    audioPlayer.onAudioPositionChanged.listen((newDuration) {
      setState(() {
        position = newDuration;
      });
    });

    audioPlayer.onPlayerCompletion.listen((state) {
      setState(() {
        isPlaying = false;
      });
    });

    await audioPlayer.play(audioUrl);
  }


Solution 1: ABV

I believe there is something wrong with the code below. Here, you are setting the values to the position and all item have the reference of same position. So once you change position in slider, other slider values are also getting updated.

max:
                                                  duration.inSeconds.toDouble(),
                                              value:
                                                  position.inSeconds.toDouble(),
                                              onChanged: (value) async {
                                                final position = Duration(
                                                    seconds: value.toInt());
                                                await audioPlayer
                                                    .seek(position);

I believe this should be managed with basicBooksSets[i]. Please keep track of current position in each object and set the value from there like,

 Slider(
    min: 0,
    max:
    basicBooksSets[i].duration.inSeconds.toDouble(),
    value:
    basicBooksSets[i].position.inSeconds.toDouble(),
    onChanged: (value) async {
        setState((){
        final position = Duration(
            seconds: value.toInt());
            basicBooksSets[i].position = position;
        });
        await audioPlayer
            .seek(position);
    }), 

Here, you are setting duration instead of it you need to set duration of specific item similar to you have update Play pause status but in Play pause you have prepared the separate list in this case use the list which you are passing to the listview

setState(() {
        duration = newDuration;
      });