Home > Mobile >  How to get List from future list function in Dart
How to get List from future list function in Dart

Time:09-29

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;
    }

CodePudding user response:

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.

  • Related