Flutter - How to load JSON into futurebuilder - flutter

Question

I'm trying to create what should be a very simple flutter app that will load all data from a POST with parameters and create a scrolling list with the details.
currently I'm not getting any errors, however the loading circle just spins for ever even though the JSON has been successfully returned, any help or ideas would be greatly appreciated.
Here's what I have so far:
import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<List<Post>> fetchPosts(http.Client client) async {
var url = "contacts.json";
var client = new http.Client();
var request = new http.Request('POST', Uri.parse(url));
var body = {'type': 'getContacts'};
request.bodyFields = body;
var data = http.post(url, body: {"type": "getContacts"})
.then((response) {
print(response.body);
return compute(parsePosts, response.body);
});
}
// A function that will convert a response body into a List<Photo>
List<Post> parsePosts(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Post>((json) => Post.fromJson(json)).toList();
}
class Post {
final String First;
final String Last;
final String Email;
final String Phone;
final String Photo;
final String Full;
Post({this.Full, this.First, this.Last, this.Photo, this.Email, this.Phone});
factory Post.fromJson(Map<String, dynamic> json) {
return new Post(
Full: json['Full'] as String,
First: json['First'] as String,
Last: json['Last'] as String,
Photo: json['Photo'] as String,
Email: json['Email'] as String,
Phone: json['Phone'] as String,
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final appTitle = 'CONTACTS';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: FutureBuilder<List<Post>>(
future: fetchPosts(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? PhotosList(photos: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
);
}
}
class PhotosList extends StatelessWidget {
final List<Post> photos;
PhotosList({Key key, this.photos}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: photos == null ? 0 : photos.length,
itemBuilder: (BuildContext context, i) {
return new ListTile(
title: new Text(photos[i].Last + " " + photos[i].First),
subtitle: new Text(photos[i].Phone),
leading: new CircleAvatar(
backgroundImage:
new NetworkImage(photos[i].Photo),
)
);
}
);
}
}
Test JSON data as such:
[{
"Full": "Billy Bobbins",
"First": "Billy",
"Last": "Bobbins",
"Photo": "",
"Email": "billyb#here.com",
"Phone": "18885551212"
}, {
"Full": "Darron Dragonborn",
"First": "Darron",
"Last": "Dragonborn",
"Photo": "",
"Email": "dragond#here.com",
"Phone": "18005551111"
}]

Answer 1

Because you are using Future and async, you can use await for asynchronous operation.
So your fetchPosts should be like this
Future<List<Post>> fetchPosts(http.Client client) async {
var url = "contacts.json";
var client = new http.Client();
var request = new http.Request('POST', Uri.parse(url));
var body = {'type': 'getContacts'};
request.bodyFields = body;
var data = await http.post(url, body: {"type": "getContacts"});
print(data.body);
return await compute(parsePosts, data.body);
}

Answer 2

You can also refer to this.It is really helpful.
https://flutter.dev/docs/cookbook/networking/background-parsing