How to get List from future list function in Dart - flutter

Question

I'm creating an app that use assets_audio_player to play music from a json response that are generated from a php script. There is a Future list function that return an Audio list. Audio isn't a Widget so i can't use a FutureBuilder. How can i use the future list?
Future<List<Audio>> creaLista() async {
final response = await http.post(Uri.parse(url));
String responseBody = response.body;
dynamic jsonObject = json.decode(responseBody);
final convertedJsonObject = jsonObject.cast<Map<String, dynamic>>();
List<Song> list =
convertedJsonObject.map<Song>((json) => Song.fromJson(json)).toList();
List<Audio> audioList = list
.map<Audio>((json) => Audio.network(
urlSong + json.url,
metas: Metas(
title: json.title,
artist: json.artist,
album: json.album,
image: MetasImage.network(
urlImage + json.image,
),
),
))
.toList();
return audioList;
}
This is the Song class:
class Song {
String title;
String artist;
String album;
String image;
String genre;
String url;
Song(
{required this.title,
required this.artist,
required this.album,
required this.image,
required this.genre,
required this.url});
factory Song.fromJson(Map<String, dynamic> json) => Song(
title: json['title'],
artist: json['artist'],
album: json['album'],
image: json['image'],
genre: json['genre'],
url: json['url']);
}
This is the json response:
[{"title":"Mille","artist":"Fedez, Achille Lauro, Orietta Berti","album":"Singolo","image":"mille.jpg","genre":"pop","url":"mille.mp3"}]

Answer 1

You don't need the Future to return a Widget to use FutureBuilder. You can create widgets based on the returned results of the future. Here's an example that would display the just the artist, but it should give you the idea.
In general I would suggest creating a custom Widget that takes an Audio object and displays all of the Audio data how you would like.
FutureBuilder(
future: creaLista(),
builder: (context, snapshot) {
if (snapshot.hasData) {
final audioList = snapshot.data as List<Audio>;
return ListView.builder(
itemCount: audioList.length,
itemBuilder: (context, index) {
return Text(audioList[index].artist);
});
} else if (snapshot.hasError) {
// handle error here
return Text('${snapshot.error}');
} else {
return CircularProgressIndicator(); // displays while loading data
}
},
)
This assumes your Audio class looks like this
class Audio {
String title, artist, album;
Audio(this.title, this.artist, this.album);
}
I'm sure its more complex than that but it should give you the idea.