How to dynamically populate MediaItem from firestore in audio_service? - just-audio

Question

I have been trying to dynamically populate MediaItem with some audio data from firestore.
I am using the exact plugin example, but this time mediaItems is being sourced dynamically from firestore. I have reviewed my code multiple times, but I can't figure out what I am doing wrong.
Here are my attempts:
First I fetched the song data using a StreamBuilder and passed it as a DocumentSnapshot List to the AudioServicePlayer() page.
List<DocumentSnapshot> _list;
_list = snapshot.data.docs;
Flexible(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => JustAudioPlaylist(
songs: [_list[index]],
),
));
},
child:
Container(child: Center(child: Text('My Playlists'))),
);
}),
)
I successfully received the QueryDocumentSnapshot as expected. But when I tried to populate MediaItem with widget.songs List, it returns just a blank white page with no error. I can't figure out what I am doing wrong here;
class AudioServicePlayer extends StatefulWidget {
static const String id = 'audio-service';
List<DocumentSnapshot> songs = [];
AudioServicePlayer({this.songs});
#override
_AudioServicePlayerState createState() => _AudioServicePlayerState();
}
class _AudioServicePlayerState extends State<AudioServicePlayer> {
MediaLibrary _mediaLibrary = MediaLibrary();
#override
void initState() {
_mediaLibrary._items.addAll(widget.songs
.map((song) => MediaItem(
// This can be any unique id, but we use the audio URL for convenience.
id: song['song'],
album: "Science Friday",
title: song['songTitle'],
artist: song['artist']['artistName'],
duration: Duration(milliseconds: 5739820),
artUri: Uri.parse(song['songImage']).toString(),
))
.toList());
super.initState();
}