fetch data with flutter Receiver: null error - json

Question

i try to fetch api json , here is the link https://api.myjson.com/bins/ut9kq
when i print the output before the loop it does get the data but after the list it give me error
"Unhandled Exception: NoSuchMethodError: The getter 'image' was called on null.
E/flutter (30730): Receiver: null
E/flutter (30730): Tried calling: image"
here is my code
List lists;
Future<List> getLists() async {
lists = new List();
await api.httpGet('bins/ut9kq').then((reponse) {
var data = jsonDecode(reponse.body);
print(data); // i get the json data => [{},{}..]
data.forEach((l) {
lists.add(ArticleModal().fromJson(l));
});
// print(lists[0].image);//Receiver: null
});
return lists;
}

Answer 1

You are using both approaches for future handling, .then callbacks and async and await. Try the following, you can wrap these around try/catch blocks for error handling.
Future<List<ArticleModal>> getLists() async {
lists = new List();
var response = await http.get('bins/ut9kq');
// a switch may be used for a wider range of codes
if (response.statusCode == 200) {
var decodedResponse = json.decode(response.body);
print(decodedResponse);
//if response is a collection
var listAricleModal = (decodedResponse as List).map((collectionElement) => ArticleModal.fromJson(collectionElement)).toList();
return listAricleModal;
}
//Your future is an empty collection
return [];
}
And to properly answer your question, image is called on null is quite obvious message.
At some point you have an image field, that object is not created. Probably is the object in the list, so two things may be happening:
List is empty, so nothing to call image on.
There is a problem when calling fromJson.
Either way, use the debugger and set breakpoints on each method first line to clearly understand what is happening.
If map function is tricky to debug, use a plain for loop until you know where the bug is.
Check out this series of videos from Google.
https://youtu.be/vl_AaCgudcY
Also official docs: https://dart.dev/codelabs/async-await