Home > OS >  flutter create songs list and send it to different statefulwidget
flutter create songs list and send it to different statefulwidget

Time:06-26

First page 
 body: FutureBuilder<List<SongModel>>(
              future: audioQuery.querySongs(),
              builder: (context, snapshot) {
                if (snapshot.data == null) {
                  return const Center(child: CircularProgressIndicator());
                }
                if (snapshot.data!.isEmpty) {
                  return const Center(child: Text('No data found'));
                }
    
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      onTap: () async {
                        playSong(snapshot.data![index].uri);
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => PlayerView(
                              songModel: snapshot.data![index],
                              audioPlayer: audioPlayer,
                            ),
                          ),
                        );
Second page 
 

                

 IconButton(
                            onPressed: () {
                              if (widget.audioPlayer.hasPrevious) {
                                widget.audioPlayer.seekToPrevious();
                              }
                            },
                            icon: const Icon(Icons.skip_previous),
                            iconSize: 40,
                          ),
                          IconButton(
                            onPressed: () {
                              if (widget.audioPlayer.playing) {
                                widget.audioPlayer.pause();
                              } else {
                                if (widget.audioPlayer.currentIndex != null) {
                                  widget.audioPlayer.play();
                                }
                              }
                            },
                            icon: StreamBuilder<bool>(
                              stream: widget.audioPlayer.playingStream,
                              builder: (context, snapshot) {
                                bool? playingState = snapshot.data;
                                if (playingState != null && playingState) {
                                  return const Icon(
                                    Icons.pause,
                                    size: 50,
                                    color: Colors.black,
                                  );
                                }
                                return const Icon(
                                    Icons.play_arrow,
                                    size: 50,
                                    color: Colors.black,
                                );
                              },
                            ),
                          ),
                          Container(
                            width: 13,
                          ),
                          IconButton(
                            onPressed: () {
                              if (widget.audioPlayer.hasNext) {
                                widget.audioPlayer.seekToNext();
                              }
                            },
                            icon: const Icon(Icons.skip_next),
                            iconSize: 40,
                          ),

i am trying to make a music app using audio query and just_audio packages and i am able to send a song detail to next page which i am currently playing but i can't find a way to send whole list to next page. at the moment i am able to play songs and pause them but not able to go to next and previous songs.

CodePudding user response:

Inside your FutureBuilder<List>:

future: audioQuery.querySongs(),
builder: (context, snapshot) {
if (snapshot.data == null) {
    return const Center(child: CircularProgressIndicator());
}
if (snapshot.data!.isEmpty) {
    return const Center(child: Text('No data found'));
}
List<SongModel> songs = item.data!;

return ListView.builder(
    itemCount: snapshot.data!.length,
    itemBuilder: (context, index) {

    return ListTile(
        onTap: () async {
        await _setAudioSource(player: audioPlayer, songs: songs, initialIndex: index);
        audioPlayer.play();
        Navigator.push(
            context,
            MaterialPageRoute(
            builder: (context) => PlayerView(
                // You dont need this parameter anymore and if you wanted
                // you could just send the song list as argument as well
                //songModel: snapshot.data![index],
                audioPlayer: audioPlayer,
            ),
            ),
    );


Then create a helper method to set the source:

void _setAudioSource({
  required AudioPlayer player
  required List<SongModel> songs, 
  int initialIndex = 0,
}) async => await player.setAudioSource(
  ConcatenatingAudioSource(
    // Start loading next item just before reaching it.
    useLazyPreparation: true, // default
    // Customise the shuffle algorithm.
    shuffleOrder: DefaultShuffleOrder(), // default
    // Specify the items in the playlist.
    // Not sure if [SongModel.uri] will be always populated
    // you can change the logic to use data (the song itself) instead
    children: songs.map((songModel) => AudioSource.uri(songModel.uri!)).toList(),
  ),
  // Playback will be prepared to start from track1.mp3
  initialIndex: initialIndex, // default
  // Playback will be prepared to start from position zero.
  initialPosition: Duration.zero, // default
);

CodePudding user response:

I ran into a new issue nvm i am new in flutter so now i am able to loop through the list but when on player view which is a different file and widget i can skip only one song and then it keeps skipping to the current song which is probably due to not updating the current information of song and i can't find a way to do that. Looking for a solution. and Thank you!

  • Related