How to display my List<Object> into Listview? - dart

Question

i have an Json File as assets. parsing works perfect, but when i use the list from my json, an error is thrown. "the getter was called on null"
Here my JsonCode:
class Biersorten{
final List<Bier> biersorten;
Biersorten({
this.biersorten
});
factory Biersorten.fromJson(List<dynamic> parsedJson){
List<Bier> listBiersorten = new List<Bier>();
listBiersorten = parsedJson.map((i)=>Bier.fromJson(i)).toList();
return new Biersorten(
biersorten: listBiersorten,
);
}
}
class Bier{
int id;
String name;
String firmenname;
String alkoholgehalt;
Bier({this.id, this.name, this.firmenname, this.alkoholgehalt});
factory Bier.fromJson(Map<String, dynamic> parsedJson){
return Bier(
id: parsedJson["id"],
name : parsedJson["name"],
firmenname : parsedJson ["firmenname"],
alkoholgehalt: parsedJson["alkoholgehalt"]
);
}
}
Here my HomePageCode:
class MyHomePage extends StatelessWidget {
final String title;
Biersorten biersorten;
MyHomePage({this.title}){
loadBier();
}
Future<String> _loadBierAsset() async {
return await rootBundle.loadString("assets/JSON/Beer.json");
}
Future loadBier() async {
String jsonString = await _loadBierAsset();
final jsonResponse = json.decode(jsonString);
biersorten = new Biersorten.fromJson(jsonResponse);
print(biersorten.biersorten[0].alkoholgehalt);
}
Widget getCard(String title){
return Card(
child: Container(
height: 50,
child: Center(
child: Text(title),
),
)
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: <Widget>[
ListView.builder(
itemCount: biersorten.biersorten.length,
itemBuilder: (context, i){
return getCard(biersorten.biersorten[i].name);
},
)
],
),
);
}
}
In the Function _loadBierAsset() i can use the List, but in the ListView.builder it throw an error.
How can i solve this problem?
Thanks for help:)

Answer 1

It is because your function is async and it doesn't return before the list is built. Till that time the list hasn't been initialized.First change your widget from Stateless to Stateful. Then Do this:
body: biersorten!=null ?
Column(
children: <Widget>[
ListView.builder(
itemCount: biersorten.biersorten.length,
itemBuilder: (context, i){
return getCard(biersorten.biersorten[i].name);
},
)
],
): Center(child: CircularProgressIndicator()),
And change your loadBier function to
Future loadBier() async {
String jsonString = await _loadBierAsset();
final jsonResponse = json.decode(jsonString);
setState((){
biersorten = new Biersorten.fromJson(jsonResponse);
});
print(biersorten.biersorten[0].alkoholgehalt);
}
And in your initState() add
loadBier();