es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiando el bgcolor de índices específicos de una lista en Flutter.

En mi aplicación Flutter, quería resaltar el texto en cada elemento de la lista mientras se reproduce un audio. Cuando el audio termina, el siguiente elemento de la lista debería ser resaltado. Pero lo que está sucediendo es que no puedo resaltar solo los índices específicos. Actualmente, cuando se inicia la lista de reproducción, en cada audio alternativo, todos los elementos de la lista cambian de color de fondo. ¿Cómo puedo especificar qué índice resaltar? Por ejemplo, en una lista de reproducción de 7 audios, el primer elemento debería ser resaltado con el primer audio reproduciéndose. ¡Por favor, ayúdame!”

Texto:

En mi aplicación Flutter, quería resaltar el texto en cada elemento de la lista mientras se reproduce un audio. Cuando el audio termina, el siguiente elemento de la lista debería ser resaltado. Pero lo que está sucediendo es que no puedo resaltar solo los índices específicos. Actualmente, cuando se inicia la lista de reproducción, en cada audio alternativo, todos los elementos de la lista cambian de color de fondo. ¿Cómo puedo especificar qué índice resaltar? Por ejemplo, en una lista de reproducción de 7 audios, el primer elemento debería ser resaltado con el primer audio reproduciéndose. ¡Por favor, ayúdame!”

Código:

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,
);

}

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para especificar qué índice resaltar en una lista de reproducción, es necesario hacer un seguimiento del audio que se está reproduciendo actualmente y su índice correspondiente. Puedes lograr esto agregando una variable a tu widget de estado que contenga el índice actual y actualizándolo cada vez que comience a reproducirse un nuevo audio.

    En tu función playAudioNetwork, puedes actualizar el índice actual en el listener audioPlayer.playlistAudioFinished y usarlo para establecer la variable ishighlight para el elemento de lista correspondiente:

    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);
      }
    
      setState(() {
        currentIndex = 0;
      });
    
      playlist = Playlist(audios: _audios);
      audioPlayer.playlistAudioFinished.listen((event) {
        setState(() {
          currentIndex++;
          ishighlight = (index == currentIndex);
        });
      });
    
      audioPlayer.open(
        playlist,
        autoStart: true,
        showNotification: true,
      );
    }
    

    Luego, en tu widget TextSpan, puedes usar la variable currentIndex para determinar si resaltar o no el texto:

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

    Al hacer esto, solo se resaltará el elemento de lista correspondiente al audio que se está reproduciendo actualmente, y los otros elementos permanecerán sin cambios.

Comments are closed.