FutureBuilder is not displaying json data fetched from server

Question

i am new to flutter, for some reason futurebuilder is not displaying json fetched data from server; the data is printed on debug console but it is not displayed in UI, i changed my code over and over but i always get the same outcome "something went wrong"

Future<List<Album>> getData(http.Client client) async {
List<Album> list;
String link = "https://extendsclass.com/api/json-storage/bin/efcedbd";
var res = await http
    .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
print(res.body);
if (res.statusCode == 200) {
  dynamic data = json.decode(res.body);
  var rest = data["articles"] as List;
  print(rest);
  list = rest.map<Album>((dynamic json) => Album.fromJson(json)).toList();
}
print("List Size: ${list.length}");
return list;}
Future<List<Album>> transactionsFuture;
void initState() {
transactionsFuture = getData(http.Client());
super.initState();}

class Album {

final String id;

Album({this.id});

factory Album.fromJson(Map<String, dynamic> json) {
return Album(
  id: json['id'] as String,
);}}
body: FutureBuilder(
  future: transactionsFuture,
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      // Data fetched successfully, display your data here
      return Column(
        children: <Widget>[
          Text(snapshot.data.id),

        ],
      );
    } else if (snapshot.hasError) {
      // If something went wrong
      return Text('Something went wrong...');
    }

    // While fetching, show a loading spinner.
    return CircularProgressIndicator();
  }
)

is my code missing something?

Answer 1

You implemented your FutureBuilder and getData function incorrectly. With FutureBuilder, you can directly call the getData function without assigning that function's return value to the variable declared in your code. Also, remove your initState() and fromJson() Try this:

Future<String> getData(http.Client client) async {
String link = "https://extendsclass.com/api/json-storage/bin/efcedbd";
var res = await http
    .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
print(res.body);
if (res.statusCode == 200) {
  final data = json.decode(res.body);
}
return data["id"] ;}

Your build Widget:

body: FutureBuilder(
  future: getData,
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      // Data fetched successfully, display your data here
      return Column(
        children: <Widget>[
          Text(snapshot.data),
        ],
      );
    } else if (snapshot.hasError) {
      // If something went wrong
      return Text('Something went wrong...');
    }
    return CircularProgressIndicator();
  }
 ),