Flutter - How to make a slider widget behave like a SeekBar

1.1k views Asked by At

My Flutter Code (Just-Audio Plugin)

SliderTheme(
  data: SliderThemeData(
    trackHeight: 3,
    thumbShape:
    RoundSliderThumbShape(enabledThumbRadius: 8),
    thumbColor: kWhiteColor,
    activeTrackColor: kPrimaryColor,
    inactiveTrackColor: kWhiteColor.withOpacity(0.5),
    overlayColor: kPrimaryColor.withOpacity(0.1),
    trackShape: AppCustomTrackShape(),
  ),
  child: Slider(
    max: mediaProvider.totalDuration.inSeconds.toDouble(),
    value: mediaProvider.currentPosition.inSeconds.toDouble(),
    onChanged: (double value) async{
      await mediaProvider.seekAudioPlayer(value);
    },
  ),
)

Current Behaviour: When the audio is playing and I drag the slider you notice a weird animation like the slider is being dragged from the opposite direction.

I think that weird behaviour is because the value of the slider is constantly changing (Audio Playing)

Required Behaviour: When the audio is playing and I drag the slider, the slider's thumb should animate(move) but the value of the slider shouldn't be changed until the drag event ends(onChnagedEnd). Just like youtube and any other audio/video player.

Provider Variable Update

void readyPlayer(){
  audioPlayer.durationStream.listen((Duration? duration) {
    if(duration != null){
      updateTotalDuration(duration);
    }
  });

  audioPlayer.positionStream.listen((Duration duration) {
    updateCurrentPosition(duration);
  });

  audioPlayer.playerStateStream.listen((PlayerState playerState) {
    updatePlayerState(playerState);
  });

  audioPlayer.playingStream.listen((bool playing) {
    updatePlaying(playing);
  });

  audioPlayer.processingStateStream.listen((ProcessingState state){
    if(state == ProcessingState.completed){
      nextScene();
      playAudio();
    }
  });

  notifyListeners();
}
0

There are 0 answers