Changing bgcolor of specific list indexes flutter

Question

in my flutter application, I wanted to highlight the text in each list item with an audio playing. When the audio finishes, the next list item should be highlighted. But what's happening is that I'm unable to highlight only the specific indexes. Currently, when the playlist starts, on each alternate audio, all the list items change bgcolor. So how can i specify which index to highlight? For example in a playlist of 7 audios, 1st item should be highlighted with the first audio playing. please help!

 text: TextSpan(
                          text: arabic  ,
                          style: TextStyle(
                            color: getTextColor(index),
                            backgroundColor:  ishighlight ? Colors.blue:Colors.white,
                            fontSize: 24.0,
                            fontWeight: FontWeight.w200,
                            fontFamily: 'uthmanitext', ),

 void playAudioNetwork() async{

     Playlist playlist;

    List<Audio> _audios = [];

    for (int i =1;i<=7;i++) {

      String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i}.mp3';
      _audios.add(Audio.network(Url));
      print(Url);
    }
    playlist = Playlist(audios: _audios);
    audioPlayer.playlistAudioFinished.listen((event) {

      setState(() {
ishighlight= !ishighlight;
      });
    });

    audioPlayer.open(
      playlist,
      autoStart: true,
      showNotification: true,
    );

  }

Answer 1

You define a boolean that indicates highlight status named ishighlight and when one of the items is playing, you change ishighlight value then you decide by ishighlight in this line :

backgroundColor:  ishighlight ? Colors.blue:Colors.white,

so all items will be highlit. You should have a integer not boolean named highlightedIndex then change your code like this:

 text: TextSpan(
                          text: arabic  ,
                          style: TextStyle(
                            color: getTextColor(index),
                            backgroundColor:  highlightedIndex == index ? Colors.blue:Colors.white,
                            fontSize: 24.0,
                            fontWeight: FontWeight.w200,
                            fontFamily: 'uthmanitext', ),

 void playAudioNetwork(int index) async{

     Playlist playlist;

    List<Audio> _audios = [];

    for (int i =1;i<=7;i++) {

      String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i}.mp3';
      _audios.add(Audio.network(Url));
      print(Url);
    }
    playlist = Playlist(audios: _audios);
    audioPlayer.playlistAudioFinished.listen((event) {

      setState(() {
highlightedIndex= index;
      });
    });

    audioPlayer.open(
      playlist,
      autoStart: true,
      showNotification: true,
    );

  }

you should pass the list's item index to playAudioNetwork method