Flutter Button Icon not changing with audio player

Question

I'm trying to make a radio app, using the assets_audio_player library, it does fetch the radio stream from the link, and all is working, but when I try to make the Play/Pause button change icon accordingly, it just doesn't work, I tried two approaches:

1- Using the library builder:

assetsAudioPlayer.builderCurrent(
              builder: (context, isPlaying){
                return PlayerBuilder.isPlaying(
                    player: assetsAudioPlayer,
                    builder: (context, isPlaying) {
                      return RawMaterialButton(
                          constraints: BoxConstraints.expand(width: 70, height: 70),
                          fillColor: Constants.WHITE,
                          shape: CircleBorder(),
                          child: RadiantGradientMask(
                            child: Icon(isPlaying ? Icons.pause : Icons.play_arrow ,
                              size: 42,
                              color: Constants.WHITE,
                            ),
                            gradient: gradient,
                          ),
                          onPressed: (){
                            assetsAudioPlayer.playOrPause();
                          }
                          );
                    });
              }
          ),

2- Using a normal button, and a bool value and setState:

RawMaterialButton(
            constraints: BoxConstraints.expand(width: 70, height: 70),
            fillColor: Constants.WHITE,
            shape: CircleBorder(),
            child: RadiantGradientMask(
              child: Icon(isPlaying ? Icons.pause : Icons.play_arrow ,
                size: 42,
                color: Constants.WHITE,
              ),
              gradient: gradient,
            ),
            onPressed: (){
              assetsAudioPlayer.playOrPause();
              setState(() {
                isPlaying = assetsAudioPlayer.isPlaying.value;
              });
            },

In the 1st method, the library starts streaming, but the icon doesn't change at all (pause/play), in the 2nd method, it does change, but after pressing the button several times, it glitches, and the 'play' becomes 'pause', and 'pause' becomes 'play' (reversed).

Any idea about how to get this to work properly?

Answer 1

The method call assetsAudioPlayer.playOrPause(); is Async, and the setState({}); is Sync. You are checking if the status changed synchronously, but changing it async, you need to await for the the playOrPause() method.