In my flutter application, I'm trying to change the background color of text in list items for an audio playing. So each list item has one audio file. I have to detect when the audio ends and then make the next item highlighted accordingly and play the next audio automatically. The problem is with the current code, the first list item is not the changing the background color with the first audio playing.
void playAudioNetwork(int index) async{
Playlist playlist;
List<int> durations = [6,7,5,5,7,6,18];
List<Audio> _audios = [];
for (int i =0;i<=6;i++) {
String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i+1}.mp3';
await audioPlayer.open(Audio.network(Url));
await Future.delayed(Duration(seconds: durations[i]), () {
getBgColor(i+1);
setState(() {
});
});
print(Url);
}
}
I tried calling the color changing method for the first index before the audio starts like this:
void playAudioNetwork(int index) async{
Playlist playlist;
List<int> durations = [6,7,4,5,7,6,18];
List<Audio> _audios = [];
await Future.delayed(Duration(seconds: durations[0]), () {
getBgColor(0);
setState(() {
});
});
for (int i =0;i<=6;i++) {
String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i+1}.mp3';
await audioPlayer.open(Audio.network(Url));
await Future.delayed(Duration(seconds: durations[i]), () {
getBgColor(i+1);
setState(() {
});
});
print(Url);
}
}
Now, the first index does change it's background color with the correct audio playing but audio starting is also delayed. The audio starts playing 6 seconds after you press the paly button. I need help how can I highlight the first index as well without delaying the whole audio playing process? Thank you.
Color getBgColor(int index){
highlightedIndex = index;
}
TextSpan(
text: arabic ,
style: TextStyle(
color: getTextColor(index),
backgroundColor: highlightedIndex == index ? Colors.blue: Colors.white ,
fontSize: 24.0,
fontWeight: FontWeight.w200,
fontFamily: 'uthmanitext', ),
