Future Builder to make Sliver Lists - dart

Question

I am trying to generate a dynamic list of slivers from a GET request. But I am having trouble, it seems the response data is null. Here is my code:
import 'package:flutter/material.dart';
import 'boardSummary.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:flutter/foundation.dart';
class HomepageBody extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomepageBodyState();
}
}
class HomepageBodyState extends State <HomepageBody> {
#override
Widget build(BuildContext context) {
return new Expanded(
child: new Container(
color: new Color(0xFF736AB7),
child: new FutureBuilder <List<Post>>(
future: fetchPost(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) print(snapshot.error);
else
return jobscroll(context, snapshot);
//: Center(child: CircularProgressIndicator());
}
),
),
);
}
}
Future<List<Post>>fetchPost() async {
final response = await http.get('https://jsonplaceholder.typicode.com/posts?userId=1');
return compute(parsePosts, response.body);
}
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 userId;
final String hashtag;
final String price;
final String description;
Post({this.userId, this.hashtag, this.price, this.description});
factory Post.fromJson(Map<String, dynamic> json) {
return Post(
userId: json['userId'],
hashtag: json['id'],
price: json['title'],
description: json['body'],
);
}
}
Widget jobscroll(BuildContext context, AsyncSnapshot snapshot) {
List data = snapshot.data;
return CustomScrollView(
scrollDirection: Axis.vertical,
shrinkWrap: false,
slivers: <Widget>[new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 24.0),
sliver: new SliverList(
delegate: new SliverChildBuilderDelegate(
(context, index) => new BoardSummary(data[index]),
childCount: data.length,
),
),
),
],
);
}
BoardSummary is a stateless widget class that just takes creates a "card" using the properties on each "Post". It takes in a object of type "Post."
The console spit out a lot of errors but this was the last one that seemed meaningful it also appeared in my emulator:
I/flutter (18882): Another exception was thrown: NoSuchMethodError: The getter 'length' was called on null.
EDIT Here's also the first few lines from my slack trace:
E/flutter (13964): type 'int' is not a subtype of type 'String'
E/flutter (13964): #0 new Post.fromJson (file:///home/daniel/Desktop/testapp/lib/ui/homePageBody.dart:76:19)
E/flutter (13964): #1 parsePosts.<anonymous closure> (file:///home/daniel/Desktop/testapp/lib/ui/homePageBody.dart:60:40)
E/flutter (13964): #2 MappedListIterable.elementAt (dart:_internal/iterable.dart:414:29)
E/flutter (13964): #3 ListIterable.toList (dart:_internal/iterable.dart:219:19)
E/flutter (13964): #4 parsePosts (file:///home/daniel/Desktop/testapp/lib/ui/homePageBody.dart:60:56)
E/flutter (13964): #5 _IsolateConfiguration.apply (package:flutter/src/foundation/isolates.dart:88:16)
E/flutter (13964): #6 _spawn.<anonymous closure> (package:flutter/src/foundation/isolates.dart:96:30)
What should I do?
Edit casting this piece of code to string made it work, just have overflow to fix. If there is a better solution feel free to share!
return Post(
userId: json['userId'].toString(),
hashtag: json['id'].toString(),
price: json['title'].toString(),
description: json['body'].toString(),
);

Answer 1

FutureBuilder builds immediately even when the value is not yet available, because build() is sync and can't be delayed.
The FutureBuilder example shows how to check if the value is already available (default: ... and not snapshot.hasError):
new FutureBuilder<String>(
future: _calculation, // a Future<String> or null
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none: return new Text('Press button to start');
case ConnectionState.waiting: return new Text('Awaiting result...');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return new Text('Result: ${snapshot.data}');
}
},
)