Adding Two JSON Objects In The Same Listview Simultaneously In Flutter

I'm new and exploring flutter and I've run into quite a problem. that is I've been trying to add two JSON objects (which one has a text data and the other has audio data) in my List View.

text data http://api.alquran.cloud/v1/quran/en.asad

audio data http://api.alquran.cloud/v1/quran/ar.alafasy

End point http://api.alquran.cloud/v1/quran/{{edition}}

the output I want to have is text - audio, and next line text - audio , and so on.

so how can I make use of this?

[EDITED}

future builder

FutureBuilder<TextModel>(
        future: futureText,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(snapshot.data!.status);
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }

          // By default, show a loading spinner.
          return const CircularProgressIndicator();
        },
      )

text service

Future<TextModel> getText() async{
    final url = "http://api.alquran.cloud/v1/quran/en.asad";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return TextModel.fromJson(body);
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load text');
    }
  }

audio service

Future<AudioModel> getAudio() async{
    final url = "http://api.alquran.cloud/v1/quran/ar.alafasy";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return AudioModel.fromJson(body);
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load audio');
    }
  }

and models are are done in https://app.quicktype.io/

You can try this by calling both APIs in same function

Future<List<Map<String, dynamic>>> getData() async {
    print("calling");
    const url = "http://api.alquran.cloud/v1/quran/ar.alafasy";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    const textUrl = "http://api.alquran.cloud/v1/quran/en.asad";
    Uri textUri = Uri.parse(textUrl);
    final textResponse = await http.get(textUri);
    final textBody = json.decode(textResponse.body);

    if (response.statusCode == 200 && textResponse.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return [body, textBody];
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load audio');
    }
  }

and FutureBuilder like this

FutureBuilder(
        future: getData(),
        builder: (context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
          if (snapshot.hasData) {
            return Column(
              children: [
                Text("${snapshot.data!}"),
                Text("${snapshot.data!}")
              ],
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          } else {
            return const CircularProgressIndicator();
          }
        },
      )

Modify UI as per your need